/**
 * Curio tokens v2, "Premium dark glow" (2026-10-29, ops/design/curio-glow-brief.md).
 * Single dark theme. [data-theme="paper"] and [data-theme="night"] render the same dark canvas.
 * Surface CSS uses these tokens only (scripts/css-guard.sh). Gradients come from --g-*,
 * shadows and glows from --e-* / --glow-*, glass from --glass-*.
 */
@font-face {
    font-family: 'Inter Fallback';
    src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
}

@font-face {
    font-family: 'Space Grotesk Fallback';
    src: local('Segoe UI Semibold'), local('Helvetica Neue'), local('Arial');
    size-adjust: 100%;
    ascent-override: 90%;
    descent-override: 22%;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://fonts.bunny.net/inter/files/inter-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://fonts.bunny.net/space-grotesk/files/space-grotesk-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fonts.bunny.net/space-grotesk/files/space-grotesk-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('https://fonts.bunny.net/syne/files/syne-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('https://fonts.bunny.net/syne/files/syne-latin-800-normal.woff2') format('woff2');
}

/* ==========================================================================
   1. Colour, gradients, glass, elevation. One theme; every data-theme value
      and the always-dark shells re-declare it so nested sections stay dark.
   ========================================================================== */
:root,
[data-theme],
[data-theme="night"],
[data-theme="paper"],
.cr-footer,
.cr-consent {
    color-scheme: dark;

    /* Raw palette (reference only; components use the --c-* roles below) */
    --ink-1000: #07060B;   /* canvas */
    --ink-950: #0C0A12;
    --ink-900: #110F18;
    --ink-850: #16131F;
    --ink-800: #1D1928;
    --ink-700: #2A2537;
    --ink-500: #6E6880;
    --violet-500: #8B5CF6;
    --violet-300: #C4B5FD;
    --violet-700: #7C3AED;
    --pink-500: #EC4899;
    --pink-300: #F9A8D4;
    --pink-700: #DB2777;
    --coral-500: #FF7A59;
    --coral-300: #FFB199;
    --coral-800: #C2410C;
    --cyan-400: #22D3EE;
    --cyan-200: #A5F3FC;

    /* Roles. Contrast on --c-bg (#07060B): text 18.2:1, text-2 8.3:1, text-3 5.8:1,
       accent-text 11.1:1, violet-300 10.9:1, cyan-400 11.2:1. All AA (>= 4.9:1) on glass, surface-2 and surface-hover too. */
    --c-bg: #07060B;
    --c-bg-raised: #0C0A12;
    --c-surface: #110F18;        /* solid card / sheet */
    --c-surface-2: #16131F;      /* inset, inputs, chips */
    --c-surface-hover: #1D1928;
    --c-line: rgba(255, 255, 255, .08);
    --c-line-strong: rgba(255, 255, 255, .18);
    --c-text: #F4F2FA;
    --c-text-2: #A9A3B8;
    --c-text-3: #8C869B;
    --c-text-prose: #D3CFDD;     /* long-form body text, 13.3:1 */
    --c-violet: #8B5CF6;
    --c-violet-text: #C4B5FD;
    --c-pink: #EC4899;
    --c-pink-text: #F9A8D4;
    --c-coral: #FF7A59;
    --c-cyan: #22D3EE;
    --c-accent: #FF7A59;         /* hot accent (fills); --c-on-accent on it 7.9:1 */
    --c-accent-hover: #FF8F73;
    --c-accent-press: #F26744;
    --c-on-accent: #07060B;
    --c-accent-text: #F9A8D4;    /* accent-coloured text and links */
    --c-accent-tint: rgba(139, 92, 246, .16);
    --c-on-brand: #FFFFFF;       /* text on --g-brand-btn, min 4.6:1 at every stop */
    --c-focus: #C4B5FD;
    --c-success: #4ADE80;
    --c-danger: #FB7185;
    --c-warning: #FBBF24;
    --c-info: #67E8F9;
    --c-success-bg: rgba(74, 222, 128, .12);
    --c-danger-bg: rgba(251, 113, 133, .12);
    --c-warning-bg: rgba(251, 191, 36, .12);
    --c-info-bg: rgba(103, 232, 249, .10);
    --c-scrim: rgba(4, 3, 8, .78);
    --c-header-bg: #07060B;

    /* Gradients (the only place gradients are written) */
    --g-brand: linear-gradient(135deg, #8B5CF6, #EC4899 55%, #FF7A59);
    --g-brand-btn: linear-gradient(135deg, #7C3AED, #DB2777 55%, #C2410C);   /* white text AA */
    --g-brand-btn-hover: linear-gradient(135deg, #7C3AED, #DB2777 40%, #C2410C);   /* pink stop shifts; all stops AA */
    --g-text: linear-gradient(100deg, #C4B5FD 0%, #F9A8D4 45%, #FFB199 100%);
    --g-hairline: linear-gradient(90deg, transparent, rgba(139, 92, 246, .7) 25%, rgba(236, 72, 153, .8) 55%, rgba(255, 122, 89, .6) 80%, transparent);
    --g-border: conic-gradient(from 0deg, #8B5CF6, #EC4899, #FF7A59, #22D3EE, #8B5CF6);
    --g-sheen: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
    --g-glow-violet: radial-gradient(closest-side, rgba(139, 92, 246, .55), rgba(139, 92, 246, .18) 55%, transparent);
    --g-glow-pink: radial-gradient(closest-side, rgba(236, 72, 153, .45), rgba(236, 72, 153, .14) 55%, transparent);
    --g-glow-coral: radial-gradient(closest-side, rgba(255, 122, 89, .38), rgba(255, 122, 89, .1) 55%, transparent);
    --g-glow-cyan: radial-gradient(closest-side, rgba(34, 211, 238, .3), rgba(34, 211, 238, .08) 55%, transparent);
    --g-card-glow: radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, .12), transparent 60%);
    --g-fade-bottom: linear-gradient(180deg, transparent, #07060B);
    --ambient:
        radial-gradient(60% 50% at 50% -8%, rgba(139, 92, 246, .22) 0%, transparent 70%),
        radial-gradient(40% 35% at 92% 8%, rgba(236, 72, 153, .10) 0%, transparent 70%);
    --g-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");

    /* Glass (cards only; backdrop-filter never on the header or an ancestor of a fixed element) */
    --glass-bg: rgba(255, 255, 255, .04);
    --glass-bg-strong: rgba(255, 255, 255, .07);
    --glass-bg-hover: rgba(255, 255, 255, .06);
    --glass-border: rgba(255, 255, 255, .08);
    --glass-border-strong: rgba(255, 255, 255, .16);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .06);
    --glass-blur: blur(20px) saturate(140%);
    --glass-solid: rgba(17, 15, 24, .88);   /* glass over busy content (consent, toasts) */

    /* Elevation and glow (box-shadow values) */
    --e-1: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
    --e-2: 0 24px 64px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .06);
    --e-3: 0 40px 120px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
    --glow-1: 0 0 0 1px rgba(139, 92, 246, .25), 0 12px 40px -12px rgba(139, 92, 246, .45);
    --glow-2: 0 0 0 1px rgba(236, 72, 153, .3), 0 20px 70px -14px rgba(236, 72, 153, .5), 0 8px 30px -10px rgba(139, 92, 246, .5);
    --glow-btn: 0 8px 28px -8px rgba(236, 72, 153, .6), 0 2px 10px -2px rgba(139, 92, 246, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
    --glow-btn-hover: 0 14px 40px -8px rgba(236, 72, 153, .75), 0 4px 16px -2px rgba(139, 92, 246, .6), inset 0 1px 0 rgba(255, 255, 255, .3);
    --ring: 0 0 0 3px rgba(196, 181, 253, .35);

    /* Legacy names (curio.css, un-migrated markup) mapped to the glow palette */
    --bg: #07060B;
    --surface: #110F18;
    --surface-2: #16131F;
    --border: rgba(255, 255, 255, .08);
    --text: #F4F2FA;
    --muted: #A9A3B8;
    --accent: #F472B6;
    --accent-2: #8B5CF6;
    --success: #4ADE80;
    --on-accent: #07060B;
    --accent-light: #F9A8D4;
    --accent-soft: #FDA4AF;
    --accent-pale: #FBCFE8;
    --purple-light: #C4B5FD;
    --purple-soft: #DDD6FE;
    --purple-pale: #EDE9FE;
    --danger: #FB7185;
    --warning: #FBBF24;
    --warning-soft: #FDE68A;
    --info: #67E8F9;
    --success-soft: #86EFAC;
    --accent-warm: #FF7A59;
    --accent-warm-hover: #FF8F73;
    --on-warm: #07060B;
    --focus-ring: #C4B5FD;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
    --glow: 0 0 0 transparent;
    --gradient-page: #07060B;
    --gradient-brand: linear-gradient(135deg, #8B5CF6, #EC4899 55%, #FF7A59);
    --gradient-brand-strong: linear-gradient(135deg, #7C3AED, #DB2777 55%, #C2410C);
    --gradient-logo: linear-gradient(100deg, #FFFFFF 0%, #F9A8D4 50%, #C4B5FD 100%);
}

/* ==========================================================================
   2. Type, space, radii, layout, motion
   ========================================================================== */
:root {
    --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
    --font-display: 'Space Grotesk', 'Space Grotesk Fallback', 'Inter', system-ui, sans-serif;
    --font-brand: 'Syne', 'Space Grotesk', 'Inter', system-ui, sans-serif;

    /* 13 / 15 / 17 / 21 px, then fluid headings. 375px -> 1280px:
       fs-5 28 -> 40, fs-6 34 -> 56, fs-7 40 -> 72, fs-display 44 -> 96 */
    --fs-1: .8125rem;
    --fs-2: .9375rem;
    --fs-3: 1.0625rem;
    --fs-4: 1.3125rem;
    --fs-5: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
    --fs-6: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem);
    --fs-7: clamp(2.5rem, 1.45rem + 4.2vw, 4.5rem);
    --fs-display: clamp(2.75rem, 1.25rem + 6.3vw, 6rem);
    --lh-tight: 1.02;
    --lh-heading: 1.12;
    --lh-body: 1.6;
    --ls-display: -.045em;
    --ls-heading: -.025em;
    --ls-eyebrow: .14em;

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
    --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;

    --r-1: 8px; --r-2: 12px; --r-3: 20px; --r-4: 28px; --r-5: 36px; --r-pill: 999px;

    --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);
    --container-prose: 700px;
    --container-narrow: 560px;
    --container: 1160px;
    --container-wide: 1320px;
    --header-h: 60px;
    --mobile-tab-h: 4.5rem;
    --container-max: 1160px;
    --container-max-xl: 1320px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --dur-1: 140ms;
    --dur-2: 240ms;
    --dur-3: 420ms;
    --dur-4: 700ms;
    --dur-orb: 26s;
    --dur-loop: 9s;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --reveal-shift: 24px;
}

@media (min-width: 900px) {
    :root { --header-h: 68px; }
}