/* ==========================================================================
   tokens.css — the single source of design decisions.
   Palette measured from the reference deck (docs/06-visual-style.md §A):
   deep navy canvas, one electric-blue accent, strictly one hue family.
   4px spacing base, fluid type scale. Change values here, never in page CSS.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- surfaces ----------------------------------------------------------
     A soft blue gradient, brighter toward the bottom-right (see body). */
  --canvas:        #070a11;   /* deepest */
  --canvas-mid:    #070b14;   /* majority of the page */
  --canvas-bright: #09111d;   /* lightest corner */
  --canvas-raised: #0b1220;   /* raised surface / panel fill */
  --surface-1:     #0b1220;
  --surface-2:     #0d1729;
  --surface-3:     #122036;

  /* hairlines: the structure of the whole design, blue-tinted, never grey */
  --line-1: #0c1c30;   /* subtle: row dividers, inner rules */
  --line-2: #102038;   /* visible: panel borders, section rules */
  --line-3: #1a3352;   /* emphasis: hover, crop marks */

  /* --- text -------------------------------------------------------------- */
  --text-1: #f5f8fd;   /* 18.4:1 on canvas — headings */
  --text-2: #d0d3d9;   /* 11.2:1 — body */
  --text-3: #8b98a8;   /*  6.6:1 — meta, captions, footer */
  --text-4: #72808f;   /*  4.8:1 — decorative / tertiary mono only */

  /* --- accents (one hue family, two weights) ----------------------------- */
  --eng:        #4ca8fc;   /* electric blue — engineering line, primary CTA */
  --eng-ink:    #04101f;   /* text on blue fills */
  --eng-soft:   rgba(76, 168, 252, 0.13);
  --eng-line:   rgba(76, 168, 252, 0.42);
  --eng-glow:   rgba(76, 168, 252, 0.22);

  --mac:        #8aa8f5;   /* periwinkle — Mac line, same family */
  --mac-ink:    #0a1122;
  --mac-soft:   rgba(138, 168, 245, 0.13);
  --mac-line:   rgba(138, 168, 245, 0.42);

  --accent-deep: #3468a0;  /* pressed / less-important accent marks */

  --ok:    #4ca8fc;   /* status reads in the accent: the deck has no green */
  --warn:  #8aa8f5;
  --danger:#7f8fa6;   /* no warm hue exists in this system */

  /* the one accent a viewport is allowed to lead with */
  --accent:       var(--eng);
  --accent-ink:   var(--eng-ink);
  --accent-soft:  var(--eng-soft);
  --accent-line:  var(--eng-line);

  /* faint blue wash used for hover fills instead of white */
  --wash-1: rgba(140, 180, 240, 0.045);
  --wash-2: rgba(140, 180, 240, 0.075);
  --wash-3: rgba(140, 180, 240, 0.12);

  /* --- type -------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco,
    "Cascadia Mono", Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-100: 0.6875rem;   /* 11 — mono labels, chips, meta */
  --fs-200: 0.8125rem;   /* 13 — small body, table cells */
  --fs-300: 0.9375rem;   /* 15 — UI text */
  --fs-400: 1.0625rem;   /* 17 — body */
  --fs-450: 1.1875rem;   /* 19 — lede on small screens */
  --fs-500: clamp(1.25rem, 1.1rem + 0.5vw, 1.4375rem);   /* 20–23 */
  --fs-600: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);      /* 24–28 */
  --fs-700: clamp(1.75rem, 1.45rem + 1.3vw, 2.25rem);    /* 28–36 */
  --fs-800: clamp(2.125rem, 1.6rem + 2.3vw, 3.125rem);   /* 34–50 */
  --fs-900: clamp(2.5rem, 1.7rem + 3.7vw, 4.375rem);     /* 40–70 */

  --lh-tight: 1.04;
  --lh-head: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --tracking-head: -0.022em;
  --tracking-tight: -0.012em;
  --tracking-mono: 0.14em;

  --measure: 64ch;
  --measure-tight: 48ch;

  /* --- space (4px base) -------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 104px;

  /* --- layout ------------------------------------------------------------ */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 44px);
  --section-y: clamp(56px, 6.5vw, 104px);
  --header-h: 64px;
  --radius: 3px;
  --radius-lg: 5px;

  /* --- effects ----------------------------------------------------------- */
  --shadow-plate: 0 24px 60px -28px rgba(2, 5, 12, 0.9),
                  0 1px 0 rgba(140, 180, 240, 0.05) inset;
  --shadow-lift: 0 10px 30px -12px rgba(2, 5, 12, 0.8);
  --ease: cubic-bezier(0.2, 0.65, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 420ms;

  /* fine dot field + grid, used by hero and section plates */
  --dot: rgba(139, 152, 168, 0.16);
  --dot-size: 24px;
}

/* The Mac line opts into periwinkle; the engineering pages stay electric blue.
   Same hue family — the distinction is carried by weight, not by a second hue. */
.theme-mac {
  --accent:      var(--mac);
  --accent-ink:  var(--mac-ink);
  --accent-soft: var(--mac-soft);
  --accent-line: var(--mac-line);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}