:root {
    /* Editorial palette: deep indigo primary, warm coral accent, slate text. */
    --color-bg: #fbfaff;
    --color-surface: #ffffff;
    --color-surface-soft: #f5f3ff;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-soft: #94a3b8;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-primary: #4f46e5;
    --color-primary-soft: #eef2ff;
    --color-primary-hover: #4338ca;
    --color-accent: #f97316;
    --color-accent-soft: #fff7ed;
    --color-tag-bg: #eef2ff;
    --color-tag-text: #4338ca;

    --page-width: 1120px;
    --prose-width: 720px;
    --page-padding-x: clamp(20px, 5vw, 48px);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 16px rgba(79, 70, 229, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 40px rgba(79, 70, 229, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    /* Subtle mesh-gradient — two soft radial pools at opposite corners.
       Stays decorative, never dominates. */
    background-image:
        radial-gradient(1100px 600px at -10% -10%, rgba(79, 70, 229, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 110%, rgba(249, 115, 22, 0.08), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
}

/* FocusOnNavigate (Routes.razor, Selector="h1") moves focus to the page heading after
   every navigation for screen-reader users — it sets tabindex="-1" and calls .focus(),
   so the browser draws a focus ring around the hero heading on every visit ("the text is
   always bordered"). Suppress the ring for this programmatic (tabindex=-1) focus only;
   real keyboard focus on interactive controls keeps its ring. */
h1:focus,
[tabindex="-1"]:focus {
    outline: none;
}

::selection {
    background: var(--color-primary);
    color: #fff;
}

/* Newsletter status pages (confirmed / unsubscribed / link-invalid). These are
   native SSR routes — no bundle CSS — and shared the .newsletter-result class with
   no styling, so they rendered flush-left and unstyled. Give them the same centred,
   constrained prose layout the rest of the site uses (.site__main already supplies
   the vertical padding, so this only needs width + horizontal padding). */
.newsletter-result {
    max-width: var(--prose-width);
    margin: 0 auto;
    padding: 0 var(--page-padding-x);
}

.newsletter-result h1 {
    margin: 0 0 16px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.newsletter-result p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.newsletter-result a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.newsletter-result a:hover {
    text-decoration: underline;
}