/*
 * Design tokens – Sebastian Günther, Security & Applied AI.
 *
 * Every theme-dependent token is defined three times:
 *   1. :root                                       light (default)
 *   2. :root[data-theme="dark"]                    dark, set by theme.js before first paint
 *   3. @media (prefers-color-scheme: dark)
 *        :root:not([data-theme])                   dark fallback without JavaScript
 * Blocks 2 and 3 must stay identical (tools/check-contrast.mjs verifies this).
 *
 * The 3D engine reads only the --w-* tokens via getComputedStyle. They are plain
 * #RRGGBB hex values or unitless numbers – never var() chains – and --w-bg always
 * equals --bg. Theme-independent tokens live in the first :root block only, so the
 * media-query overrides at the end of this file are not shadowed by the theme blocks.
 */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted, OFL-1.1 (licence texts next to the files). Subsets latin + latin-ext,
   unicode-range values taken verbatim from the Fontsource 5.3.0 CSS. */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Metric-adjusted fallbacks: they occupy the same space as the web fonts, so the
 * swap causes (almost) no layout shift.
 *   size-adjust     = advance width of the web font / fallback, measured in Chrome
 *                     on the site's own copy (Newsreader 380–400 at display sizes vs.
 *                     Georgia: 0.93–0.985; Manrope 420–500 at text sizes vs. Arial:
 *                     1.035–1.05).
 *   *-override      = hhea/typo metric of the web font / unitsPerEm / size-adjust
 *                     (Newsreader 1470/-530 of 2000, Manrope 2132/-600 of 2000,
 *                     both with line gap 0 and USE_TYPO_METRICS set).
 * Gelasio, Arimo and Liberation Sans are metric-compatible with Georgia and Arial.
 */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia"), local("Gelasio");
  size-adjust: 96%;
  ascent-override: 76.56%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Arimo"), local("Liberation Sans");
  size-adjust: 104%;
  ascent-override: 102.5%;
  descent-override: 28.85%;
  line-gap-override: 0%;
}

/* ------------------------------------------------ theme-independent + light */

:root {
  color-scheme: light;

  /* B.1 ink scale (OKLCH, hue of the crest blue #0B3470; 700/800 are brand values) */
  --ink-50: #EFF4FC;
  --ink-100: #DEE9F9;
  --ink-200: #BED2F2;
  --ink-300: #96B6E8;
  --ink-400: #6A93D2;
  --ink-500: #4271BA;
  --ink-600: #26569F;
  --ink-700: #233F78;
  --ink-800: #0B3470;
  --ink-900: #072148;
  --ink-950: #041531;

  /* B.2 semantic UI tokens – light */
  --bg: #F4F5F7;
  --bg-rgb: 244, 245, 247;
  --surface: #FAFBFD;
  --surface-rgb: 250, 251, 253;
  --surface-solid: #FAFBFD;
  --surface-2: #E8EDF5;
  --border: rgba(11, 52, 112, 0.14);
  --hairline: #D3DAE5;
  --text: #0E1726;
  --text-rgb: 14, 23, 38;
  --text-muted: #465163;
  --accent: #233F78;
  --accent-strong: #0B3470;
  --accent-hover: #072148;
  --on-accent: #FFFFFF;
  --focus: #233F78;
  --gate-idle: #6F87B6;
  --gate-pass: #26569F;
  --finding: #9A4229;
  --line-faint: #DCE1EA;
  --line: #A9B4C6;
  --line-strong: #4F6590;
  --selection-bg: #0B3470;
  --selection-fg: #FFFFFF;

  /* B.7 shadows – light */
  --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 24px 56px -32px rgba(7, 33, 72, 0.28);
  --shadow-button: none;

  /* E.3 engine tokens – light (hex or unitless only) */
  --w-bg: #F4F5F7;
  --w-grid: #DCE1EA;
  --w-line: #A9B4C6;
  --w-line-strong: #4F6590;
  --w-gate-idle: #6F87B6;
  --w-gate-pass: #26569F;
  --w-finding: #9A4229;
  --w-body: #0B3470;
  --w-checker: #3A4354;
  --w-alu: #B9C0CB;
  --w-sheet: #FBFBFA;
  --w-glass: #6E8CC4;
  --w-glass-opacity: 0.14;
  --w-shadow: #0E1726;
  --w-shadow-opacity: 0.16;
  --w-hemi-sky: #FFFFFF;
  --w-hemi-ground: #DCE3EE;
  --w-hemi-int: 0.9;
  --w-key-color: #FFFFFF;
  --w-key-int: 2.2;
  --w-rim-color: #BFD1F2;
  --w-rim-int: 0.5;
  --w-env-int: 0.55;
  --w-exposure: 1.0;
  --w-fog-scale: 1.0;
  /* R2 §1.4: workpiece contour ink, face tint, cap marks, letterpress card, contact glint */
  --w-ink: #0B3470;
  --w-tint-opacity: 0.13;
  --w-paper: #FBF9F3;
  --w-press: #0B3470;
  --w-press-rough: 0.5;
  --w-press-metal: 0;
  --w-press-relief: 1.2;
  --w-glint-int: 0.25;
  --w-mark: #F4F5F7;
  /* owner decisions §3.4: workshop devices (housing, bezel, unlit abstract screens) */
  --w-device: #C9D0DA;
  --w-bezel: #1B2230;
  --w-screen-bg: #F7F9FC;
  --w-screen-line: #9AA8BF;
  --w-screen-ink: #0B3470;
  --w-screen-muted: #DDE4EF;

  /* B.4 typography */
  --font-serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-sans: "Manrope", "Manrope Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(3rem, 1.9rem + 4.6vw, 6.75rem);
  --fw-display: 380;
  --lh-display: 0.98;
  --ls-display: -0.02em;

  --fs-h2: clamp(2rem, 1.45rem + 2.1vw, 3.25rem);
  --fw-h2: 400;
  --lh-h2: 1.06;
  --ls-h2: -0.015em;

  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fw-h3: 620;
  --lh-h3: 1.3;
  --ls-h3: -0.005em;

  --fs-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);
  --fw-lead: 420;
  --lh-lead: 1.55;

  --fs-body: 1.0625rem;
  --fw-body: 450;
  --lh-body: 1.62;
  --measure: 62ch;

  --fs-small: 0.9375rem;
  --fw-small: 500;
  --lh-small: 1.5;

  --fs-label: 0.8125rem;
  --fw-label: 500;
  --lh-label: 1.4;
  --ls-label: 0.08em;

  --fs-label-3d: 0.75rem;
  --fw-label-3d: 500;
  --lh-label-3d: 1.3;
  --ls-label-3d: 0.06em;

  --fs-wordmark: 1.125rem;
  --fw-wordmark: 500;
  --fs-wordmark-sub: 0.75rem;
  --fw-wordmark-sub: 500;

  --fs-quote: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fw-quote: 360;
  --lh-quote: 1.1;
  --ls-quote: -0.01em;

  /* B.5 spacing and layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --gutter: clamp(16px, 2vw, 28px);
  --margin: clamp(16px, 5vw, 72px);
  --container: 1320px;
  --panel-pad: clamp(24px, 2.6vw, 40px);
  --header-h: 64px;

  /* B.6 radii (nothing ≥ 12px) */
  --radius-chip: 3px;
  --radius-button: 4px;
  --radius-panel: 6px;
  --radius-media: 4px;

  /* B.8 glass */
  --glass-alpha: 0.86;
  --glass-alpha-solid: 0.95;
  --glass-blur: 14px;
  --glass-saturate: 1.1;
  --panel-border: var(--border);
  --label-chip-alpha: 0.9; /* D.11 3D label chip: --surface at this alpha */

  /* A-03 focus ring */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* B.9 motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-theme: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-once: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 120ms;
  --dur-ui: 200ms;
  --dur-panel: 480ms;
  --dur-theme: 600ms;
  --dur-canvas-in: 600ms;
  --dur-cut-out: 200ms;
  --dur-cut-in: 300ms;
}

/* ------------------------------------------------------------ dark (JS) */

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

  --bg: #0A111D;
  --bg-rgb: 10, 17, 29;
  --surface: #0C1320;
  --surface-rgb: 12, 19, 32;
  --surface-solid: #0C1320;
  --surface-2: #16213A;
  --border: rgba(150, 182, 232, 0.16);
  --hairline: #1E2A40;
  --text: #E6EBF3;
  --text-rgb: 230, 235, 243;
  --text-muted: #A3AEC0;
  --accent: #96B6E8;
  --accent-strong: #96B6E8;
  --accent-hover: #BED2F2;
  --on-accent: #0A111D;
  --focus: #96B6E8;
  --gate-idle: #4F74B8;
  --gate-pass: #96B6E8;
  --finding: #E0957A;
  --line-faint: #151E30;
  --line: #2B3A55;
  --line-strong: #7E9CD6;
  --selection-bg: #96B6E8;
  --selection-fg: #0A111D;

  --shadow-panel: inset 0 1px 0 rgba(150, 182, 232, 0.07), 0 28px 60px -34px rgba(0, 0, 0, 0.7);

  --w-bg: #0A111D;
  --w-grid: #151E30;
  --w-line: #2B3A55;
  --w-line-strong: #7E9CD6;
  --w-gate-idle: #4F74B8;
  --w-gate-pass: #96B6E8;
  --w-finding: #E0957A;
  --w-body: #34579A;
  --w-checker: #C9D1DE;
  --w-alu: #4C5E80;
  --w-sheet: #1A2536;
  --w-glass: #3A5A96;
  --w-glass-opacity: 0.20;
  --w-shadow: #000000;
  --w-shadow-opacity: 0.35;
  --w-hemi-sky: #2A3F66;
  --w-hemi-ground: #05080F;
  --w-hemi-int: 0.4;
  --w-key-color: #DCE6FA;
  --w-key-int: 1.3;
  --w-rim-color: #6F93D6;
  --w-rim-int: 1.4;
  --w-env-int: 0.25;
  --w-exposure: 0.95;
  --w-fog-scale: 0.9;
  --w-ink: #A8C3EF;
  --w-tint-opacity: 0.2;
  --w-paper: #16213A;
  --w-press: #C3D4F2;
  --w-press-rough: 0.3;
  --w-press-metal: 0.75;
  --w-press-relief: 0.7;
  --w-glint-int: 0.6;
  --w-mark: #D2DEF4;
  --w-device: #3A475C;
  --w-bezel: #05080F;
  --w-screen-bg: #0E1626;
  --w-screen-line: #40587F;
  --w-screen-ink: #96B6E8;
  --w-screen-muted: #1A2740;
}

/* ------------------------------------------------- dark (no-JS fallback) */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #0A111D;
    --bg-rgb: 10, 17, 29;
    --surface: #0C1320;
    --surface-rgb: 12, 19, 32;
    --surface-solid: #0C1320;
    --surface-2: #16213A;
    --border: rgba(150, 182, 232, 0.16);
    --hairline: #1E2A40;
    --text: #E6EBF3;
    --text-rgb: 230, 235, 243;
    --text-muted: #A3AEC0;
    --accent: #96B6E8;
    --accent-strong: #96B6E8;
    --accent-hover: #BED2F2;
    --on-accent: #0A111D;
    --focus: #96B6E8;
    --gate-idle: #4F74B8;
    --gate-pass: #96B6E8;
    --finding: #E0957A;
    --line-faint: #151E30;
    --line: #2B3A55;
    --line-strong: #7E9CD6;
    --selection-bg: #96B6E8;
    --selection-fg: #0A111D;

    --shadow-panel: inset 0 1px 0 rgba(150, 182, 232, 0.07), 0 28px 60px -34px rgba(0, 0, 0, 0.7);

    --w-bg: #0A111D;
    --w-grid: #151E30;
    --w-line: #2B3A55;
    --w-line-strong: #7E9CD6;
    --w-gate-idle: #4F74B8;
    --w-gate-pass: #96B6E8;
    --w-finding: #E0957A;
    --w-body: #34579A;
    --w-checker: #C9D1DE;
    --w-alu: #4C5E80;
    --w-sheet: #1A2536;
    --w-glass: #3A5A96;
    --w-glass-opacity: 0.20;
    --w-shadow: #000000;
    --w-shadow-opacity: 0.35;
    --w-hemi-sky: #2A3F66;
    --w-hemi-ground: #05080F;
    --w-hemi-int: 0.4;
    --w-key-color: #DCE6FA;
    --w-key-int: 1.3;
    --w-rim-color: #6F93D6;
    --w-rim-int: 1.4;
    --w-env-int: 0.25;
    --w-exposure: 0.95;
    --w-fog-scale: 0.9;
    --w-ink: #A8C3EF;
    --w-tint-opacity: 0.2;
    --w-paper: #16213A;
    --w-press: #C3D4F2;
    --w-press-rough: 0.3;
    --w-press-metal: 0.75;
    --w-press-relief: 0.7;
    --w-glint-int: 0.6;
    --w-mark: #D2DEF4;
    --w-device: #3A475C;
    --w-bezel: #05080F;
    --w-screen-bg: #0E1626;
    --w-screen-line: #40587F;
    --w-screen-ink: #96B6E8;
    --w-screen-muted: #1A2740;
  }
}

/* ------------------------------------------------ user-preference overrides */

/* B.9: no motion durations; the canvas cross-fade keeps a short opacity-only fade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 0ms;
    --dur-ui: 0ms;
    --dur-panel: 0ms;
    --dur-theme: 0ms;
    --dur-canvas-in: 150ms;
    --dur-cut-out: 0ms;
    --dur-cut-in: 0ms;
  }
}

/* B.8: opaque panels with a stronger edge. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass-alpha: 1;
    --glass-alpha-solid: 1;
    --glass-blur: 0px;
    --panel-border: var(--line-strong);
  }
}