/* ============================================================
   NewslettersSuck.Email — Global Design System
   ============================================================ */

/* === Design Tokens ============================================= */
:root {
    /* Colours */
    --c-bg: #ffffff;
    --c-surface: #f8fafc;
    --c-surface-hover: #f1f5f9;
    --c-border: #e2e8f0;
    --c-border-strong: #cbd5e1;

    --c-text: #0f172a;
    --c-text-2: #334155;
    --c-text-3: #64748b;
    --c-text-4: #94a3b8;

    --c-primary: #6366f1;
    --c-primary-dark: #4f46e5;
    --c-primary-light: #818cf8;
    --c-primary-bg: #eef2ff;
    --c-primary-border: #c7d2fe;

    --c-success: #10b981;
    --c-success-bg: #ecfdf5;
    --c-warning: #f59e0b;
    --c-warning-bg: #fffbeb;
    --c-danger: #ef4444;
    --c-danger-bg: #fef2f2;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  3.75rem;
    --text-7xl:  4.5rem;

    --leading-tight:   1.1;
    --leading-snug:    1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    --tracking-tight:   -0.025em;
    --tracking-tighter: -0.04em;
    --tracking-normal:  0;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;

    /* Spacing */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
    --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;

    /* Radii */
    --radius-sm:   0.25rem;
    --radius:      0.5rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-xl:   1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

    /* Transitions */
    --ease-spring:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast:   120ms;
    --duration:        200ms;
    --duration-slow:   300ms;
    --duration-slower: 500ms;

    /* Layout */
    --container-sm: 40rem;
    --container-md: 56rem;
    --container-lg: 72rem;
    --container-xl: 80rem;
    --nav-height: 4rem;
}

/* === Reset ===================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* === Typography ================================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--c-text);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); font-weight: 600; }
h4 { font-size: var(--text-lg); font-weight: 600; }

p { line-height: var(--leading-relaxed); }

a {
    color: var(--c-primary);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--c-primary-dark); }

:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1:focus { outline: none; }

/* === Page Entry Animation ====================================== */
@keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

main {
    animation: page-enter var(--duration-slow) var(--ease-out) both;
}

/* === Scroll Reveal ============================================= */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity var(--duration-slower) var(--ease-out),
        transform var(--duration-slower) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Buttons =================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.625rem 1.25rem;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-spring);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    overflow: hidden;
}

.btn:active { transform: scale(0.97); }

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0);
    transition: background var(--duration-fast) var(--ease-out);
    border-radius: inherit;
    pointer-events: none;
}
.btn:active::after { background: rgb(255 255 255 / 0.12); }

.btn--primary {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.btn--primary:hover {
    background: var(--c-primary-dark);
    border-color: var(--c-primary-dark);
    color: #fff;
    box-shadow: var(--shadow-md), inset 0 1px 0 rgb(255 255 255 / 0.12);
    transform: translateY(-1px);
}
.btn--primary:active { transform: scale(0.97) translateY(0); }

.btn--glow {
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration) var(--ease-out),
        transform var(--duration-fast) var(--ease-spring);
}
.btn--glow:hover { box-shadow: 0 0 0 4px rgb(99 102 241 / 0.2), var(--shadow-lg); }

.btn--secondary {
    background: var(--c-surface);
    color: var(--c-text-2);
    border-color: var(--c-border);
    box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
    background: var(--c-surface-hover);
    color: var(--c-text);
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--c-text-2);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }

.btn--danger { background: var(--c-danger-bg); color: var(--c-danger); border-color: #fecaca; }
.btn--danger:hover { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }

.btn--sm  { padding: 0.375rem 0.875rem; font-size: var(--text-xs);  border-radius: var(--radius-sm); }
.btn--lg  { padding: 0.875rem 1.75rem;  font-size: var(--text-base); border-radius: var(--radius-md); }
.btn--xl  { padding: 1rem 2rem;         font-size: var(--text-base); font-weight: 700; border-radius: var(--radius-lg); }

.btn__arrow {
    width: 1rem; height: 1rem; flex-shrink: 0;
    transition: transform var(--duration-fast) var(--ease-spring);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn:disabled,
.btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* === Forms ===================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2); }

.field label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--c-text-2);
    letter-spacing: 0.01em;
}

.field__input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: var(--text-base);
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm), var(--shadow-inner);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}
.field__input::placeholder { color: var(--c-text-4); }
.field__input:hover:not(:focus) { border-color: var(--c-border-strong); }
.field__input:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15), var(--shadow-sm);
}

textarea.field__input { resize: vertical; min-height: 6rem; }

select.field__input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    cursor: pointer;
}

.field__hint { font-size: var(--text-xs); color: var(--c-text-3); line-height: var(--leading-relaxed); }
.field__required { color: var(--c-danger); font-weight: 700; }
.field__value {
    font-size: var(--text-sm);
    color: var(--c-text-2);
    padding: var(--space-2) var(--space-3);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
}

.valid.modified:not([type=checkbox]) {
    border-color: var(--c-success);
    box-shadow: 0 0 0 3px rgb(16 185 129 / 0.1), var(--shadow-sm);
    outline: none;
}
.invalid {
    border-color: var(--c-danger);
    box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1), var(--shadow-sm);
    outline: none;
}
.validation-message { font-size: var(--text-xs); color: var(--c-danger); display: flex; align-items: center; gap: var(--space-1); }

/* Colour swatches */
.colour-swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

.swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius);
    border: 2px solid rgb(0 0 0 / 0.1);
    box-shadow: var(--shadow-sm);
    position: relative;
    cursor: default;
    transition: transform var(--duration-fast) var(--ease-spring);
}
.swatch:hover { transform: scale(1.2) translateY(-2px); box-shadow: var(--shadow-md); z-index: 1; }

/* Attribution badge */
.attribution { display: inline-flex; align-items: center; }
.attribution__badge {
    display: inline-flex; align-items: center; gap: 0.25em;
    padding: 0.1em 0.5em;
    font-size: var(--text-xs); font-weight: 600;
    color: var(--c-primary);
    background: var(--c-primary-bg);
    border: 1px solid var(--c-primary-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: background var(--duration-fast) var(--ease-out);
}
.attribution__badge:hover { background: var(--c-primary-border); color: var(--c-primary-dark); }
.attribution__empty { font-size: var(--text-xs); color: var(--c-text-4); font-style: italic; }

/* === Banners =================================================== */
.billing-banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm); font-weight: 500;
    justify-content: center; text-align: center;
}
.billing-banner--warning  { background: var(--c-warning-bg); color: #92400e; border-bottom: 1px solid #fde68a; }
.billing-banner--cancelled { background: var(--c-danger-bg); color: #991b1b; border-bottom: 1px solid #fecaca; }

/* === Loading / Skeleton ======================================== */
@keyframes shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position:  1000px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--c-surface) 25%, var(--c-surface-hover) 50%, var(--c-surface) 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: var(--radius);
}

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    width: 1.25rem; height: 1.25rem;
    border: 2px solid var(--c-border);
    border-top-color: var(--c-primary);
    border-radius: var(--radius-full);
    animation: spin 0.7s linear infinite;
    display: inline-block; flex-shrink: 0;
}

/* === SubscriptionGuard ======================================== */
.sub-guard__loading {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-8); color: var(--c-text-3);
    font-size: var(--text-sm); justify-content: center;
}
.sub-guard__loading::before {
    content: ''; width: 1rem; height: 1rem;
    border: 2px solid var(--c-border); border-top-color: var(--c-primary);
    border-radius: var(--radius-full); animation: spin 0.7s linear infinite; flex-shrink: 0;
}
.sub-guard__paywall {
    max-width: var(--container-sm); margin: var(--space-16) auto;
    text-align: center; padding: var(--space-12) var(--space-8);
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.sub-guard__paywall h2 { margin-bottom: var(--space-3); font-size: var(--text-2xl); }
.sub-guard__paywall p  { color: var(--c-text-3); margin-bottom: var(--space-6); }
.sub-guard__cta {
    display: inline-flex; align-items: center;
    padding: 0.875rem 2rem; background: var(--c-primary); color: #fff;
    border-radius: var(--radius-lg); font-weight: 700; font-size: var(--text-base);
    transition: background var(--duration-fast), transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-fast);
}
.sub-guard__cta:hover { background: var(--c-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.sub-guard__warning {
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
    background: var(--c-warning-bg); border: 1px solid #fde68a;
    border-radius: var(--radius); color: #92400e; font-size: var(--text-sm);
}
.sub-guard__warning--cancelled { background: var(--c-danger-bg); border-color: #fecaca; color: #991b1b; }

/* === Blazor Error UI ========================================== */
#blazor-error-ui {
    color-scheme: light only;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
    bottom: 0; left: 0;
    box-shadow: var(--shadow-xl);
    box-sizing: border-box;
    display: none;
    padding: var(--space-4) var(--space-6);
    position: fixed; width: 100%; z-index: 9999;
    font-size: var(--text-sm); color: #991b1b;
    align-items: center; gap: var(--space-4);
}
#blazor-error-ui .reload { font-weight: 600; color: var(--c-danger); text-decoration: underline; }
#blazor-error-ui .dismiss {
    cursor: pointer; position: absolute; right: 1rem; top: 50%;
    transform: translateY(-50%); font-size: 1.25rem; opacity: 0.6;
    transition: opacity var(--duration-fast);
}
#blazor-error-ui .dismiss:hover { opacity: 1; }

.blazor-error-boundary { background: var(--c-danger); padding: var(--space-4) var(--space-4) var(--space-4) 3.5rem; color: white; border-radius: var(--radius); position: relative; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* === Utilities ================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }
.container { width: 100%; max-width: var(--container-lg); margin-inline: auto; padding-inline: var(--space-6); }

@media (max-width: 640px) {
    .container { padding-inline: var(--space-4); }
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
}