/* ===========================================================
   DapaScore — design tokens

   COLOR HIERARCHY (the rule that governs everything below):
     BLUE  = navigation, selection, active state, links
     GREEN = the one primary action (perform the check)
     RED   = errors and warnings ONLY
   Never use green for decoration or red for accent. If a new
   element needs attention, it is blue unless it *performs* something.
   =========================================================== */

:root {

  /* ---------- Ink ---------- */
  --ink-950: #0d1526;
  --ink-900: #172033;   /* headings, dark text */
  --ink-700: #334155;   /* strong body */
  --ink-600: #475569;   /* form controls, checkbox labels */
  --ink-500: #64748b;   /* secondary text, placeholders */
  --ink-400: #94a3b8;   /* non-text only — fails 4.5:1 as body copy */
  --ink-200: #d9e3f0;   /* border */
  --ink-100: #edf2f9;
  --ink-050: #f6f9fd;
  --white:   #ffffff;
  --navy:    #123b7a;   /* deep authority blue */

  /* ---------- Blue: navigation, selection, links ---------- */
  --brand-050: #eaf3ff;
  --brand-100: #cfe0fb;
  --brand-300: #93b4f5;
  --brand-500: #2563eb;   /* links, accents, glyphs — 5.17:1 both ways */
  --brand-600: #1d4ed8;   /* SELECTED state (active tab) — 6.7:1 */
  --brand-700: #1a43b8;   /* pressed */

  /* ---------- Green: the primary action, nothing else ----------
     White on --cta-500 is 3.3:1, which clears AA only as LARGE text.
     That is why .btn-primary sets 19px/700 (>=18.66px bold), where the
     threshold is 3.0. Do NOT use --cta-500 behind small or regular-weight
     white text — use --cta-600 (5.02:1) for anything smaller. */
  --cta-500: #16a34a;   /* CTA base  — 3.3:1, large bold labels only */
  --cta-600: #15803d;   /* CTA hover — 5.02:1 */
  --cta-700: #116b33;   /* CTA active */

  /* ---------- Red: errors and warnings ONLY ---------- */
  --danger: #ef4444;

  /* ---------- Sky (hero canvas) ---------- */
  --sky-top:  #17478f;   /* navy — carries nav contrast at 9:1 */
  --sky-mid:  #2f70ba;   /* softened mid; white text still 5.06:1 */
  --sky-fade: #dceeff;   /* the page settles into light blue, not white */
  --sky-scrim: rgba(9, 26, 58, .16);   /* light touch; the navy does the work */

  /* ---------- Washes ----------
     Blue only. A green or pink block would compete with the green=action
     and red=error rules, so the tinted feature blocks are all one tint. */
  --wash-blue: #eaf3ff;
  --wash-gray: #f6f9fd;
  --card-tint:   #eff6ff;   /* feature blocks */
  --card-stroke: #dbeafe;   /* feature block border */

  /* ---------- Score bands (0-100), for the results table ----------
     Data encoding, a separate axis from the action/error hierarchy. */
  --score-1: #ef4444;   /*  0-19  weak     */
  --score-2: #f59e0b;   /* 20-39  fair     */
  --score-3: #eab308;   /* 40-59  moderate */
  --score-4: #16a34a;   /* 60-79  strong   */
  --score-5: #15803d;   /* 80-100 elite    */

  /* ---------- Semantic ---------- */
  --text:        var(--ink-900);
  --text-body:   var(--ink-700);
  --text-muted:  var(--ink-500);
  --border:      var(--ink-200);
  --surface:     var(--white);
  --surface-sub: var(--ink-050);
  --surface-ink: var(--ink-950);
  --link:        var(--brand-500);
  --focus:       var(--brand-500);
  --on-sky-hairline: rgba(255, 255, 255, .40);

  /* ---------- Type ---------- */
  --font-display: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-chunky: var(--font-display);
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-hero:  clamp(38px, 5.2vw, 62px);
  --fs-h2:    clamp(26px, 3vw, 36px);
  --fs-h3:    19px;
  --fs-body:  16px;
  --fs-small: 14px;
  --fs-label: 14px;

  --lh-hero:    1.06;
  --lh-heading: 1.18;
  --lh-body:    1.65;

  --tracking-hero: -.03em;
  --tracking-h2:   -.02em;
  --tracking-chunky: .01em;

  /* ---------- Space (4px base) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-18: 72px; --sp-24: 96px;

  /* ---------- Shape ---------- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* ---------- Depth ---------- */
  --e1: 0 2px 10px rgba(15, 59, 122, .06);
  --e2: 0 8px 24px -6px rgba(15, 59, 122, .12);
  --e-card:  0 18px 50px rgba(15, 59, 122, .16);   /* the console card */
  --e-cta:   0 6px 18px -8px rgba(22, 163, 74, .28);
  --frame:   0 0 0 7px var(--ink-100);             /* pale frame on white */

  /* ---------- Layout ---------- */
  --wrap:    1240px;
  --gutter:  24px;
  --measure: 720px;

  /* ---------- Motion ---------- */
  --t-fast: .15s ease;
  --t-med:  .22s ease;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0s; --t-med: 0s; }
}