/* ============================================================
   SOREL TECHNO — Design tokens
   Source of truth for every color, font and easing value.
   Never hardcode a color/size in another file: add a token here.
   Reference: techref/02-CSS-DESIGN-SYSTEM.md
   ============================================================ */

:root {
  /* -- Palette « confluence & acier » -- */
  --paper: #f2f5f6;        /* page background — cold paper */
  --mist: #e0e7e9;         /* soft surfaces, pills */
  --ink: #101f2c;          /* primary text — deep steel ink */
  --ink-60: #48606f;       /* secondary text */
  --river: #1f7a72;        /* Richelieu / Saint-Laurent — ideas */
  --melt: #d4551a;         /* molten steel — industrial heritage */
  --hairline: #c6d1d4;     /* borders */
  --surface: #ffffff;      /* cards */

  /* -- Typography -- */
  --font-display: 'Archivo', sans-serif;   /* variable: wdth 62..125, wght 100..900 */
  --font-mono: 'JetBrains Mono', monospace;

  /* -- Motion -- */
  --ease: cubic-bezier(.16, .84, .26, 1);
  --ease-cam: cubic-bezier(.5, .05, .25, 1);  /* gentle start, no jolt */
  --dur-cam: 1.5s;         /* 3D camera travel */
  --dur-ui: .3s;           /* hovers, small transitions */
  --dur-theme: .4s;        /* light/dark colour cross-fade */
  --dur-theme-wipe: .6s;   /* light/dark circular reveal */

  /* -- Layout -- */
  --panel-w: min(88vw, 1200px);
  --panel-h: min(78vh, 760px);
  --panel-pad: clamp(28px, 5vw, 80px);
  --gutter: 5vw;

  /* -- Elevation -- */
  --shadow-card: 0 24px 50px -30px rgba(16, 31, 44, .25);

  /* -- Theme-dependent details (overridden in dark) -- */
  --grid-line: rgba(16, 31, 44, .028);
  --header-veil: rgba(242, 245, 246, .85);
  --hover-wash: rgba(255, 255, 255, .6);
  --wave-1: #cfe0dc;
  --wave-2: #a9c9c2;
  --wave-3: #1f7a72;
  --ribbon-river: #2f8a81;
  --glyph-bed: #182920;      /* inverted: dark letter bed on the light theme */
  --glyph-edge: rgba(16, 31, 44, .35);

  color-scheme: light;
}

/* ============================================================
   Dark theme — deep forest green night, same accent hues.
   Applied two ways with the SAME values (CSS cannot factor a
   media query and an attribute selector into one rule):
   1. system preference, unless the user forced light
   2. user forced dark via the header toggle (js/theme.js)
   Keep both blocks strictly in sync.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1410;
    --mist: #152219;
    --ink: #e8f1ea;
    --ink-60: #92a89a;
    --river: #2b9c90;
    --melt: #e0602a;
    --hairline: #1f3227;
    --surface: #101c15;
    --shadow-card: 0 24px 50px -30px rgba(0, 0, 0, .55);
    --grid-line: rgba(232, 241, 234, .03);
    --header-veil: rgba(11, 20, 16, .85);
    --hover-wash: rgba(255, 255, 255, .04);
    --wave-1: #11201a;
    --wave-2: #16302a;
    --wave-3: #1f7a72;
    --ribbon-river: #2a8f84;
    --glyph-bed: #dae4e1;    /* inverted: light letter bed on the dark theme */
    --glyph-edge: rgba(232, 241, 234, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1410;
  --mist: #152219;
  --ink: #e8f1ea;
  --ink-60: #92a89a;
  --river: #2b9c90;
  --melt: #e0602a;
  --hairline: #1f3227;
  --surface: #101c15;
  --shadow-card: 0 24px 50px -30px rgba(0, 0, 0, .55);
  --grid-line: rgba(232, 241, 234, .03);
  --header-veil: rgba(11, 20, 16, .85);
  --hover-wash: rgba(255, 255, 255, .04);
  --wave-1: #11201a;
  --wave-2: #16302a;
  --wave-3: #1f7a72;
  --ribbon-river: #2a8f84;
  --glyph-bed: #dae4e1;      /* inverted: light letter bed on the dark theme */
  --glyph-edge: rgba(232, 241, 234, .3);
  color-scheme: dark;
}