/* ==========================================================================
   Design tokens — "Editorial noir".

   Every colour in the project is defined here and nowhere else; the test
   suite enforces it. Dark is the default theme and lives on :root. The light
   "paper" theme is an explicit choice made with the toggle and lives under
   [data-theme="light"]. Every --color-* token is defined in both blocks.

   The stage tokens are identical in both themes on purpose: the navigation,
   the hero and the project hero band stay dark, because the portrait only
   works on black.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* --- Ground and surfaces -------------------------------------------- */
    --color-bg: #070707;
    --color-surface: #0f0f0f;
    --color-surface-raised: #151515;

    /* --- Text ------------------------------------------------------------ */
    --color-text-primary: #f2efea;
    --color-text-secondary: #b9b3ad;
    --color-text-muted: #8a847e;

    /* --- Lines ----------------------------------------------------------- */
    --color-border: #262626;
    --color-border-strong: #3a3a3a;

    /* --- Accent: red ------------------------------------------------------
       The reference red measures about 4.5:1 against both black and white,
       which is on the line. Text uses a lighter red and fills a darker one;
       side by side they read as the same colour. */
    --color-accent: #ef3b42;
    --color-accent-fill: #d61f26;
    --color-accent-fill-hover: #b9181e;
    --color-on-accent: #ffffff;
    --color-accent-deep: #c8161d;
    --color-accent-wash: rgba(214, 31, 38, 0.45);
    --color-accent-glow: rgba(239, 59, 66, 0.18);

    /* --- Stage: dark in both themes ------------------------------------- */
    --color-stage: #070707;
    --color-stage-translucent: rgba(7, 7, 7, 0.92);
    --color-stage-overlay: rgba(7, 7, 7, 0.98);
    --color-on-stage: #f2efea;
    --color-on-stage-secondary: #b9b3ad;
    --color-on-stage-muted: #8a847e;
    --color-stage-accent: #ef3b42;
    --color-stage-border: #262626;
    --color-stage-raised: #151515;
    --color-stage-shadow: rgba(0, 0, 0, 0.5);

    /* --- Skill status dots ----------------------------------------------- */
    --color-status-used: #ef3b42;
    --color-status-building: #f2b544;
    --color-status-learning: #8a847e;

    /* --- Feedback -------------------------------------------------------- */
    --color-success: #5fd39b;
    --color-success-bg: #0d2419;
    --color-success-border: #1f5a3c;
    --color-error: #ff7a7a;
    --color-error-bg: #2a0f10;
    --color-error-border: #6b1d20;

    /* --- Texture (not colours: one tile of white noise, then dimmed) ----- */
    --grain-opacity: 0.06;
    --grain-invert: 0;
}

:root[data-theme="light"] {
    color-scheme: light;

    --color-bg: #f4f1ec;
    --color-surface: #ffffff;
    --color-surface-raised: #ebe6df;

    --color-text-primary: #111111;
    --color-text-secondary: #4a4540;
    --color-text-muted: #6b655f;

    --color-border: #d9d2c8;
    --color-border-strong: #bdb4a8;

    --color-accent: #b3141b;
    --color-accent-fill: #b3141b;
    --color-accent-fill-hover: #8f1016;
    --color-on-accent: #ffffff;
    --color-accent-deep: #c8161d;
    --color-accent-wash: rgba(179, 20, 27, 0.4);
    --color-accent-glow: rgba(179, 20, 27, 0.12);

    --color-stage: #070707;
    --color-stage-translucent: rgba(7, 7, 7, 0.92);
    --color-stage-overlay: rgba(7, 7, 7, 0.98);
    --color-on-stage: #f2efea;
    --color-on-stage-secondary: #b9b3ad;
    --color-on-stage-muted: #8a847e;
    --color-stage-accent: #ef3b42;
    --color-stage-border: #262626;
    --color-stage-raised: #151515;
    --color-stage-shadow: rgba(0, 0, 0, 0.5);

    --color-status-used: #b3141b;
    --color-status-building: #9a6212;
    --color-status-learning: #6b655f;

    --color-success: #1a7a4f;
    --color-success-bg: #dcefe5;
    --color-success-border: #b6dcc8;
    --color-error: #a33524;
    --color-error-bg: #f8e0dc;
    --color-error-border: #eebeb5;

    --grain-opacity: 0.05;
    --grain-invert: 1;
}

/* Theme-independent tokens. A separate block, so the two colour blocks above
   stay directly comparable line by line. */
:root {
    /* --- Type ------------------------------------------------------------ */
    --font-display: "Anton", "Impact", "Haettenschweiler", "Arial Narrow Bold", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

    --text-2xs: 0.75rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.25rem;
    --text-xl: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    --text-statement: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem);
    --text-display-sm: clamp(2rem, 1.4rem + 2.4vw, 3rem);
    --text-display-md: clamp(2.75rem, 1.6rem + 4.6vw, 5.5rem);
    --text-display-lg: clamp(3.5rem, 2rem + 6vw, 7rem);
    --text-display-xl: clamp(3rem, 16.5vw, 15.5rem);

    --leading-tight: 0.92;
    --leading-snug: 1.2;
    --leading-body: 1.65;
    --tracking-display: 0.01em;
    --tracking-label: 0.12em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    /* --- Space ----------------------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    --section-pad: clamp(4.5rem, 3rem + 6vw, 8rem);
    --shell-max: 1320px;
    --shell-pad: clamp(1.25rem, 0.5rem + 3vw, 3rem);
    --header-height: 72px;

    /* --- Shape ----------------------------------------------------------- */
    --radius-sm: 2px;
    --radius-pill: 999px;
    --border-width: 1px;

    /* --- Motion ---------------------------------------------------------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 160ms;
    --dur-base: 320ms;
    --dur-slow: 800ms;

    /* --- Layers ---------------------------------------------------------- */
    --z-base: 1;
    --z-raised: 3;
    --z-header: 50;
    --z-overlay: 60;
    --z-grain: 100;

    /* --- Texture --------------------------------------------------------
       Film grain: a 160px fractal-noise tile, white with partial alpha. The
       light theme inverts it to dark grain via --grain-invert. */
    --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}