/* Design tokens.
   The only stylesheet allowed to contain raw colour values. Everything else refers to these
   custom properties, so the visual language can be tuned in one place. */

:root {
  color-scheme: dark;

  /* ---- surfaces ------------------------------------------------------------------- */
  --color-background: #0b0c0e;          /* near-black room */
  --color-background-deep: #070809;     /* behind overlays */
  --color-surface: #141619;             /* charcoal panels */
  --color-surface-elevated: #1b1e23;    /* graphite cards */
  --color-surface-overlay: #23272d;     /* hovered / active */
  --color-border: #2a2f37;
  --color-border-strong: #3d444f;

  /* ---- text ----------------------------------------------------------------------- */
  --color-text-primary: #ece7dc;        /* warm off-white */
  --color-text-secondary: #b6afa2;
  --color-text-muted: #7d786e;
  --color-text-inverse: #0b0c0e;

  /* ---- semantic accents (use sparingly) ------------------------------------------- */
  --color-accent-active: #e3a93a;       /* amber: active investigation, highlighted evidence */
  --color-accent-success: #63c283;      /* green: verified, operational */
  --color-accent-warning: #e0812e;      /* orange: caution, targets */
  --color-accent-danger: #e0524c;       /* red: failed, security issue */

  --tint-active: color-mix(in srgb, var(--color-accent-active) 14%, transparent);
  --tint-success: color-mix(in srgb, var(--color-accent-success) 14%, transparent);
  --tint-warning: color-mix(in srgb, var(--color-accent-warning) 14%, transparent);
  --tint-danger: color-mix(in srgb, var(--color-accent-danger) 14%, transparent);
  --tint-muted: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
  --line-active: color-mix(in srgb, var(--color-accent-active) 55%, transparent);

  /* ---- shadow --------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 20px 50px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.5);
  --shadow-glow: 0 0 0 1px var(--line-active), 0 0 24px var(--tint-active);

  /* ---- radius --------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

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

  /* ---- typography ----------------------------------------------------------------- */
  --font-sans: ui-sans-serif, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: clamp(2.5rem, 5vw, 3.5rem);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- motion --------------------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
  --dur-trace: 1200ms;
  --dur-scene: 600ms;                   /* one cutscene step (lamp, folder, veil) */
  --dur-camera: 1400ms;                 /* the pull-back at the end of the intro */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- scene illustration (templates/partials/scene.svg, painted by scene.css) ------- */
  --scene-wall: #252221;
  --scene-floor: #15120f;
  --scene-wood: #5b3f29;
  --scene-wood-dark: #3a2819;
  --scene-metal: #3a3f47;
  --scene-metal-light: #5b626c;
  --scene-paper: #d8ceb6;
  --scene-paper-dim: #9a917f;
  --scene-cork: #6a4c31;
  --scene-manila: #b3955f;
  --scene-night: #1c2633;
  --scene-night-deep: #0b0f15;
  --scene-rain: #93a4ba;
  --scene-screen: #173326;
  --scene-glow: var(--color-accent-active);
  --scene-veil: var(--color-background-deep);

  /* ---- layout --------------------------------------------------------------------- */
  --container: 84rem;
  --measure: 68ch;
  --nav-height: 3.5rem;
  --z-nav: 20;
  --z-drawer: 30;
  --z-overlay: 40;
  --z-palette: 50;
}