/* ============================================================
   WELDECK — DESIGN TOKENS  (v2, 19 Aug 2026)
   Interim system: the synced "Weldeck Design" tokens replace
   values in THIS FILE ONLY. Nothing downstream hardcodes color.
   Direction: deep ink navy + warm paper + saffron CTA.
   Deliberately unrelated to the rejected moss/lime system.
   ============================================================ */

:root {
  /* --- v4 "clean professional" palette (Microsoft/Azure reference, 22 Aug 2026) --- */
  --ink:        #1f1f1f;  /* body text */
  --ink-strong: #141414;  /* headings */
  --muted:      #5f5f5c;  /* secondary text (AA on white & grey) */
  --paper:      #f6f6f4;  /* light grey band */
  --surface:    #ffffff;  /* white */
  --line:       #e2e2de;  /* hairlines */
  --tile:       #ededea;  /* cards on white */

  /* retained names so existing rules keep working; now neutral darks */
  --navy:       #1b1b1b;
  --navy-2:     #262626;
  --navy-line:  #3a3a3a;
  --on-navy:    #f2f2f2;
  --on-navy-muted: #a8a8a8;
  --dim:        #161616;
  --on-dim:     #e6e6e6;
  --on-dim-muted: #9a9a9a;

  /* --- Action colour: ONE blue, every button --- */
  --accent:      #1957d6;  /* primary fill — white text passes AA (5.9:1) */
  --accent-down: #1446b3;  /* hover */
  --accent-ink:  #ffffff;  /* text on accent */
  --accent-line: #2c63d8;  /* data strokes/bars on light (≥3:1) */
  --accent-text: #1747c0;  /* links, kicker numbers, accent text (≥5:1) */
  --accent-soft: #e8effc;  /* tinted surfaces (selected, highlight bands) */

  /* warm highlight kept for the headline bar and star ratings only */
  --hl:          #ffd166;
  --gold:        #c98a04;

  --tint:        #eef3fd;  /* guarantee / "both" bands */

  /* --- Type: one sans family, hierarchy from weight --- */
  --font: "Inter Tight", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Tight", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body:  1.0625rem;
  --fs-small: 0.9375rem;
  --fs-tiny:  0.8125rem;
  --lh-body:  1.6;
  --track-display: -0.02em;

  /* --- Space --- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 40px;
  --s5: 64px; --s6: 96px; --s7: 136px;

  /* --- Shape: rectangular, quiet --- */
  --r-card: 12px;
  --r-btn:  6px;
  --r-pill: 999px;

  --wrap: 1160px;
  --wrap-narrow: 780px;

  --ease: cubic-bezier(.2,.6,.2,1);
  --t-reveal: 320ms;
  --stagger: 60ms;
}

/* --- Mobile: tighter spatial rhythm (same design, less dead space) --- */
@media (max-width: 880px) {
  :root {
    --s3: 20px;   /* 24 */
    --s4: 28px;   /* 40 */
    --s5: 40px;   /* 64 */
    --s6: 56px;   /* 96 */
    --s7: 80px;   /* 136 */
    --lh-body: 1.5;   /* 1.6 — ~6% off every block of body text */
  }
}