/* ============================================================================
   tokens.css — Hartford Parking Authority prototype design system
   Layer 1 of 3. Load order: fonts/fonts.css → tokens.css → base.css → components.css

   Two token layers:
     A. --hpa-*  brand tokens, taken verbatim from SITE-MODEL.md §6.5 plus the
        accessible variants that section recommends. These are the *facts* of the
        brand and must not be re-hued.
     B. --c-* / --f-* / --fs-* / --s-* role tokens. These name what a value DOES.
        Every component references a role token, never a raw hex. That makes the
        brand rules greppable: "red only where --c-command appears".

   Nothing here invents a hue except the two red states (--hpa-red-hover /
   --hpa-red-deep), which are declared with their measured contrast so the build
   can lint them.
   ========================================================================== */

:root{

  /* ---- A. Brand palette (SITE-MODEL §6.5) ------------------------------- */
  --hpa-blue:#003da5;          /* logo blue. #fff on it = 9.50:1            */
  --hpa-blue-hover:#0041af;    /* #fff on it = 8.84:1                       */
  --hpa-blue-deep:#002a72;     /* pressed. #fff on it = 13.4:1              */
  --hpa-green:#84bd00;         /* FILL ONLY — 2.27:1 on white, never text   */
  --hpa-green-hover:#8bc700;
  --hpa-green-text:#4f7300;    /* the green you may set type in: 5.55:1     */
  --hpa-red:#d50032;           /* the ONE command colour. #fff on it 5.42:1 */
  --hpa-red-hover:#b8002b;     /* declared, not improvised. #fff = 6.83:1   */
  --hpa-red-deep:#9b0025;      /* pressed. #fff = 8.68:1                    */
  --hpa-danger:#e44e56;        /* error BORDER + ICON only. 3.80:1 as a UI part */
  --hpa-warning:#ff8200;       /* emergency strip FILL only; ink on it 8.35:1 */
  --hpa-text:#000205;          /* body copy. 20.8:1 on white                */
  --hpa-muted-text:#5b6068;    /* 6.33:1 on white — replaces the site's #fefeff */
  --hpa-border:#e5e5e7;        /* hairlines                                 */
  --hpa-input-border:#767676;  /* 4.54:1 on white — the 3:1 UI floor with margin */
  --hpa-bg:#ffffff;
  --hpa-bg-muted:#f7f7f7;      /* striped rows, inert fields                */
  --hpa-tint:#e8eef8;          /* 8% blue on white — grouping only, never text */
  --hpa-footer-text:rgba(255,255,255,.7);   /* 5.43:1 on --hpa-blue         */
  --hpa-menu-sub-text:rgba(255,255,255,.85);/* 7.29:1 on --hpa-blue         */

  /* ---- B. Colour roles -------------------------------------------------- */
  --c-post:var(--hpa-blue);            /* the sign post: borders, bands, links, headings */
  --c-post-hover:var(--hpa-blue-hover);
  --c-post-pressed:var(--hpa-blue-deep);
  --c-plate:var(--hpa-bg);             /* the white sign plate                     */
  --c-legend:var(--hpa-text);          /* the lettering on a plate                 */
  --c-meta:var(--hpa-muted-text);      /* secondary lettering                      */
  --c-command:var(--hpa-red);          /* the one thing you are told to do         */
  --c-command-hover:var(--hpa-red-hover);
  --c-command-pressed:var(--hpa-red-deep);
  --c-permit:var(--hpa-green);         /* permitted / valid / done — FILL ONLY     */
  --c-permit-hover:var(--hpa-green-hover);
  --c-permit-text:var(--hpa-green-text); /* the only green you may set type in     */
  --c-ban:var(--hpa-warning);          /* emergency / prohibition strip — FILL ONLY */
  --c-fault:var(--hpa-danger);         /* error field border + error icon only     */
  --c-tint:var(--hpa-tint);            /* grouping wash                            */
  --c-stripe:var(--hpa-bg-muted);      /* zebra rows, disabled fields              */
  --c-hairline:var(--hpa-border);
  --c-input-border:var(--hpa-input-border);
  --c-on-post:#ffffff;                 /* ink on a blue ground                     */
  --c-on-post-soft:var(--hpa-menu-sub-text);
  --c-on-permit:var(--hpa-text);       /* ink on a green fill: 9.15:1              */
  --c-on-ban:var(--hpa-text);          /* ink on the orange strip: 8.35:1          */

  /* ---- Type ------------------------------------------------------------- */
  /* Poppins does UI, headings and body (SITE-MODEL §6.3).
     Overpass 700 is the accent face and is confined to the FIGURE SLOT —
     numerals, currency, clearances, permit counts, sticker months. It never
     sets a heading, a sentence or a link. See DESIGN-SYSTEM.md "Typography". */
  --f-ui:"Poppins",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-fig:"Overpass","Poppins",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:Consolas,monaco,"Courier New",monospace;

  --fw-body:400;
  --fw-med:500;
  --fw-bold:600;
  --fw-fig:700;                        /* only ever paired with --f-fig       */

  --fs-13:0.8125rem;  /* absolute floor for any rendered text, maps included */
  --fs-14:0.875rem;
  --fs-16:1rem;  /* base */
  --fs-18:1.125rem;
  --fs-20:1.25rem;
  --fs-24:1.5rem;
  --fs-28:1.75rem;
  --fs-32:2rem;
  --fs-40:2.5rem;
  --fs-fig-s:1.5rem;
  --fs-fig-m:2rem;
  --fs-fig-l:2.75rem;
  --fs-fig-xl:3.5rem;

  --lh-tight:1.1;
  --lh-head:1.25;
  --lh-base:1.5;
  --lh-loose:1.625;

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

  /* ---- Layout ----------------------------------------------------------- */
  --container:1200px;
  --pad-x:20px;               /* container side padding                      */
  --section:40px;             /* vertical rhythm between page sections       */
  --band-w:48px;              /* the coloured band on a sign plate           */
  --plate-border:2px;         /* every plate, table and panel outline        */
  --hairline:1px;
  --tap:44px;                 /* WCAG floor for any interactive target       */
  --tap-comfort:48px;         /* what we actually ship for buttons and nav   */
  --measure:70ch;

  /* ---- Radius ----------------------------------------------------------- */
  /* Zero everywhere. The brand has no rounded rectangle. The only circles in
     the system are the P roundel and the snow-ban blue light, which are round
     objects in the world, not rounded UI. */
  --radius:0;
  --radius-round:50%;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-dropdown:0 1px 4px rgba(0,0,0,.14);
  --sh-panel:0 2px 8px rgba(0,0,0,.16);
  --sh-drawer:0 6px 24px rgba(0,0,0,.28);

  /* ---- Focus (one ring per surface, so it is visible on all of them) ----- */
  --focus-on-white:0 0 0 2px #fff, 0 0 0 4px var(--c-post);
  --focus-on-blue:0 0 0 2px var(--c-post), 0 0 0 4px #fff;
  --focus-on-ban:0 0 0 2px var(--c-ban), 0 0 0 4px var(--c-legend);

  /* ---- Motion ----------------------------------------------------------- */
  --dur-fast:.1s;
  --dur-med:.2s;
  --ease:ease-in-out;
  --t-fast:var(--dur-fast) var(--ease);
  --t-med:var(--dur-med) var(--ease);

  /* ---- Stacking --------------------------------------------------------- */
  --z-base:0;
  --z-dropdown:20;
  --z-header:30;
  --z-sticky:40;
  --z-scrim:50;
  --z-drawer:60;
  --z-skip:100;

  /* ---- Breakpoints (documentation only — CSS media queries cannot read
     custom properties. Keep these and the @media literals in step.) -------- */
  --bp-s:640px;    /* stacked → side-by-side; tables stop stacking           */
  --bp-m:960px;    /* mobile drawer → desktop nav; two-column page shells    */
  --bp-l:1200px;   /* container ceiling                                      */
  --bp-xl:1600px;
}

@media (min-width:960px){
  :root{
    --pad-x:24px;
    --section:64px;
    --band-w:56px;
  }
}

/* Below 400px the gutter narrows so the 320px floor never overflows. */
@media (max-width:399px){
  :root{ --pad-x:16px; }
}