/* ==========================================================================
   Systrox design tokens — "Engineering Drawings"
   --------------------------------------------------------------------------
   Two layers:
     L1 PRIMITIVES  the only place a raw hex value is allowed to live
     L2 SEMANTIC    every rule in styles.css references these, never L1 directly

   The page runs two acts. Dark acts (hero, services, contact) sit on warm
   near-black with opaque card planes. The light act (portfolio) is drafting
   paper — ink linework on vellum. Gold is the signal that runs through both.

   Changing the brand accent = editing the --gold-* ramp below. Nothing else,
   including the WebGL hero, which reads these tokens at boot via assets/theme.js.
   ========================================================================== */

:root {
  /* ---------- L1: primitives ---------- */

  /* Champagne gold — the brand accent, used as signal not wallpaper */
  --gold-300: #E4D3A4;   /* lights, soft fills, sprite tints */
  --gold-400: #D9C79A;   /* small text on dark, canvas labels */
  --gold-500: #C9A85C;   /* THE accent */
  --gold-600: #A98B42;   /* gradient end, pressed states */
  --gold-950: #141109;   /* ink on top of gold */

  /* Warm near-blacks — dark-act surfaces */
  --warm-1000: #000000;
  --warm-975:  #0A0A0A;  /* page ground */
  --warm-950:  #12110E;
  --warm-900:  #1E1B16;  /* doubles as --ink on the light act */
  --warm-850:  #262219;  /* opaque card / ledger row face */
  --warm-750:  #3A342A;  /* warm hairline */

  /* Drafting paper — light-act surface */
  --vellum:      #EFE8D8;
  --vellum-line: #D8CFBA;  /* drafting grid on paper */

  /* Cool neutrals — text on dark */
  --neutral-000: #FFFFFF;
  --neutral-100: #E8ECEF;
  --neutral-300: #C0C5CC;
  --neutral-500: #8A93A0;
  --neutral-600: #7A828F;  /* 5.42:1 on black — do not darken, this is the AA floor */

  /* Warm neutral — text on paper */
  --sepia-600: #5F5847;    /* 5.79:1 on vellum */

  /* Channel triplets for alpha composition */
  --accent-ch:     201 168 92;
  --surface-ch:    18 17 14;
  --surface-2-ch:  30 27 22;
  --surface-3-ch:  38 34 25;
  --vellum-ch:     239 232 216;
  --ink-ch:        30 27 22;
  --neutral-ch:    192 197 204;
  --black-ch:      0 0 0;
  --white-ch:      255 255 255;

  /* ---------- L2: semantic roles ---------- */

  --accent:        var(--gold-500);
  --accent-strong: var(--gold-600);
  --accent-soft:   var(--gold-300);
  --accent-text:   var(--gold-400);
  --on-accent:     var(--gold-950);

  /* Glow is now a monopoly: the bull's bloom and the system trace only. */
  --accent-grid:   rgb(var(--accent-ch) / .04);
  --accent-wash:   rgb(var(--accent-ch) / .05);
  --accent-veil:   rgb(var(--accent-ch) / .12);  /* focus rings */
  --accent-glow:   rgb(var(--accent-ch) / .30);  /* trace only */
  --accent-border: rgb(var(--accent-ch) / .40);

  /* Dark act */
  --bg:        var(--warm-975);
  --bg-2:      var(--warm-950);
  --surface:   var(--warm-950);
  --surface-2: var(--warm-900);
  --plane:     var(--warm-850);   /* opaque — replaces every alpha-glass fill */
  --line:        var(--warm-750);
  --line-strong: rgb(var(--neutral-ch) / .22);

  --text:       var(--neutral-100);
  --text-dim:   var(--neutral-500);
  --text-faint: var(--neutral-600);

  /* Light act (portfolio) */
  --paper:          var(--vellum);
  --paper-line:     var(--vellum-line);
  --ink:            var(--warm-900);   /* 14.07:1 on vellum */
  --ink-dim:        var(--sepia-600);  /*  5.79:1 on vellum */
  /* Gold is 1.86:1 on vellum — graphical marks only, never text. */

  --radius: 14px;

  /* ---------- typography ---------- */

  /* Archivo carries its personality in width and weight rather than in quirky
     glyphs and tight tracking — both of which disappear under Noto substitution
     in Chinese. Bold Noto Sans SC mirrors a wide industrial voice natively, so
     all three locales sound like the same brand. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
  --font-cjk:     'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* Per-locale typographic knobs, overridden in styles.css under :lang(). */
  --display-width:  118;      /* Archivo variable width axis */
  --hero-size:      clamp(40px, 7.2vw, 104px);
  --hero-leading:   0.98;
  --hero-tracking:  -0.02em;
  --title-tracking: -0.015em;
  --eyebrow-tracking: 0.12em; /* the 0.32em-uppercase-everywhere habit ends */
  --body-leading:   1.6;
  --nav-gap:        36px;
}