/* ==========================================================================
   PATHWAY DESIGN SYSTEM — TOKENS
   Every colour, size and duration in the system resolves to a value here.
   Change a token, change the whole site. Do not hard-code values elsewhere.
   ========================================================================== */

:root {
  /* ---- Brand palette (from Pathway logo assets) -------------------------- */
  --graphite:        #22282E;  /* primary ink + dark panels */
  --steel:           #1F5688;  /* accent: approved, structure, links */
  --sky:             #7DB4E2;  /* accent on dark: in-transit, active */
  --offwhite:        #F0F2F4;  /* ink on dark */
  --paper:           #F7F8FA;  /* page background — the "desk" */

  /* ---- Derived neutrals -------------------------------------------------- */
  --graphite-900:    #171B20;  /* deepest panel, footer */
  --graphite-800:    #1D2328;
  --graphite-700:    #2C333A;  /* raised surface on dark */
  --graphite-600:    #3A424A;  /* hairline on dark */
  --graphite-400:    #858F99;  /* muted ink on dark — lightened from #6B757F to
                                  clear 4.5:1 on --graphite (was 3.17:1) */
  --paper-200:       #E4E8EC;  /* hairline on light */
  --paper-300:       #CDD4DB;  /* stronger rule on light */
  --ink-muted:       #5C666F;  /* secondary text on light */

  /* ---- Functional ------------------------------------------------------- */
  --red-ink:         #C4342A;  /* plan-check corrections — red pen, only */
  --red-ink-soft:    #F2DDDA;

  /* ---- Semantic aliases (use these in components) ----------------------- */
  --bg:              var(--paper);
  --bg-panel:        var(--graphite);
  --bg-raised:       var(--graphite-700);
  --text:            var(--graphite);
  --text-muted:      var(--ink-muted);
  --text-on-dark:    var(--offwhite);
  --text-on-dark-mut:var(--graphite-400);
  --rule:            var(--paper-200);
  --rule-strong:     var(--paper-300);
  --rule-on-dark:    var(--graphite-600);
  --accent:          var(--steel);
  --accent-on-dark:  var(--sky);

  /* ---- Type families ---------------------------------------------------- */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale -------------------------------------------------------
     Display is set TIGHT (-0.035em) at large sizes — the brand voice.
     Mono labels are set WIDE (.18em) — mirrors the lockup's subline.       */
  --t-hero:    clamp(2.125rem, 4.6vw, 3.75rem);
  --t-display: clamp(1.75rem, 3.4vw, 2.75rem);
  --t-h2:      clamp(1.6rem, 3vw, 2.4rem);
  --t-h3:      clamp(1.15rem, 1.7vw, 1.4rem);
  --t-lead:    clamp(1.0625rem, 1.4vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-label:   0.6875rem;   /* mono eyebrows, sheet codes */
  --t-micro:   0.625rem;    /* title-block fields */

  --lh-tight:  0.98;
  --lh-snug:   1.15;
  --lh-body:   1.62;

  --tr-display: -0.035em;
  --tr-h2:      -0.02em;
  --tr-label:   0.18em;
  --tr-word:    0.035em;   /* 3.5% — the PATHWAY wordmark spec */

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4: 1rem;
  --s-5:  1.5rem;   --s-6:  2rem;     --s-7:  3rem;     --s-8: 4rem;
  --s-9:  6rem;     --s-10: 8rem;

  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --panel-p:   clamp(1.5rem, 3.5vw, 3.5rem);

  /* ---- Geometry ---------------------------------------------------------
     Boxy panels (LocalCan) against fully-round pill buttons (Cluster).    */
  --r-panel: 3px;
  --r-card:  2px;
  --r-pill:  999px;
  --hair:    1px;

  --container:   1200px;
  --container-w: 1320px;   /* wide panels */
  --measure:     62ch;     /* max reading width */

  /* ---- Elevation — restrained; structure comes from hairlines ----------- */
  --shadow-panel: 0 1px 2px rgba(34,40,46,.04), 0 12px 32px -12px rgba(34,40,46,.14);
  --shadow-lift:  0 2px 4px rgba(34,40,46,.06), 0 20px 48px -16px rgba(34,40,46,.20);

  /* ---- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --d-fast:    160ms;
  --d-base:    280ms;
  --d-slow:    620ms;
  --d-travel:  7s;    /* submittal token traversing the permit path */

  /* ---- Grid overlay used inside dark panels ------------------------------ */
  --grid-size: 48px;
  --grid-line: rgba(240,242,244,.055);
}

/* Reduced motion: kill travel + reveal animation, keep all content visible. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; --d-travel: 0s; }
}