/**
 * Arudynamics Consulting — Design Tokens
 *
 * Single source of truth for colour, type and spacing across the site,
 * the aru-dynamics-3d plugin, and the WebGL shaders.
 *
 * Palette decision (locked): the LOGO is authoritative.
 *   Primary  #004aad  — sampled from the wordmark vector paths
 *   Accent   gold     — sampled from the molecule artwork
 * The navy/orange pairing in the old marketing email footer is retired;
 * that footer gets regenerated from these tokens.
 *
 * GOLD RAMP IS SAMPLED, NOT EYEBALLED. The molecule ships as a raster inside
 * the SVG, so the values below were read out of the pixels of
 * `AruDynamics Consulting Logo 7T.png` (515x515, 23,416 opaque warm pixels),
 * taken at luminance percentiles of the molecule body: p8 for the core
 * shadow, p50 for the body, p92 for the specular highlight. The blue was
 * confirmed exactly: #004aad is the single most common wordmark pixel.
 *
 * CONTRAST — this is a usage rule, not a footnote:
 *   --aru-gold on --aru-stage   6.58:1  passes AA for body text
 *   --aru-gold on white         2.85:1  FAILS. Never gold text on white.
 *   --aru-gold-deep on white    7.19:1  this is the gold for light backgrounds
 *   --aru-blue on white         8.13:1  passes AA
 * Gold is a light source on the dark WebGL stage and an accent everywhere
 * else. When gold has to carry text on a light surface, use --aru-gold-deep.
 */

:root {
  /* ---- Brand ---- */
  --aru-blue:            #004aad;
  --aru-blue-600:        #003c8c;  /* hover / pressed */
  --aru-blue-400:        #2f6fc4;  /* links on dark */
  --aru-blue-050:        #e8f0fb;  /* tint fills */

  /* ---- Gold (molecule) — sampled from the artwork, see header ---- */
  --aru-gold:            #cc8c31;  /* body, p50   H35 L50% S61% */
  --aru-gold-light:      #f7e9ab;  /* specular    H49 L82% S83% */
  --aru-gold-deep:       #814a0d;  /* core shadow H32 L28% S82% */
  --aru-gold-text:       var(--aru-gold-deep);  /* gold text on light only */

  /* ---- Ink & surface (light) ---- */
  --aru-ink:             #0f1724;
  --aru-ink-muted:       #4a5058;
  --aru-ink-subtle:      #767c85;
  --aru-surface:         #ffffff;
  --aru-surface-alt:     #f6f8fb;
  --aru-border:          #dcded6;

  /* ---- Hero / WebGL stage ---- */
  --aru-stage:           #051129;  /* deep blue-black behind the 3D */
  --aru-stage-glow:      #0a2255;

  /* ---- Type ---- */
  --aru-font-sans:       system-ui, -apple-system, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
  --aru-font-display:    var(--aru-font-sans);

  --aru-step--1:         clamp(0.83rem, 0.17vw + 0.79rem, 0.94rem);
  --aru-step-0:          clamp(1.00rem, 0.29vw + 0.93rem, 1.19rem);
  --aru-step-1:          clamp(1.20rem, 0.48vw + 1.08rem, 1.50rem);
  --aru-step-2:          clamp(1.44rem, 0.76vw + 1.25rem, 1.89rem);
  --aru-step-3:          clamp(1.73rem, 1.15vw + 1.44rem, 2.38rem);
  --aru-step-4:          clamp(2.07rem, 1.71vw + 1.64rem, 3.00rem);
  --aru-step-5:          clamp(2.49rem, 2.49vw + 1.87rem, 3.79rem);

  /* ---- Space & shape ---- */
  --aru-gutter:          16px;      /* phone side gutter — never less */
  --aru-measure:         68ch;
  --aru-radius:          10px;
  --aru-radius-lg:       18px;

  /* ---- Motion ---- */
  --aru-ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --aru-dur:             240ms;
}

/* Dark mode. Guarded so an explicit light choice always wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --aru-ink:           #eaf0f8;
    --aru-ink-muted:     #a8b3c2;
    --aru-ink-subtle:    #7c8795;
    --aru-surface:       #0b1220;
    --aru-surface-alt:   #111a2c;
    --aru-border:        #22304a;
    --aru-blue-400:      #6da2e8;
  }
}

:root[data-theme="dark"] {
  --aru-ink:             #eaf0f8;
  --aru-ink-muted:       #a8b3c2;
  --aru-ink-subtle:      #7c8795;
  --aru-surface:         #0b1220;
  --aru-surface-alt:     #111a2c;
  --aru-border:          #22304a;
  --aru-blue-400:        #6da2e8;
}

/* Anyone who asks for less motion gets the poster image, never the canvas.
   Enforced again in JS — this is the belt, that's the braces. */
@media (prefers-reduced-motion: reduce) {
  .aru-canvas { display: none !important; }
  .aru-poster { display: block !important; }
}