/* ==========================================================================
   GateLog — design tokens. ONE source for spacing, type, icon and colour.
   Loaded before app.css on every page, via gl_header().

   The icon scale exists because its absence was a real defect: an inline
   <svg> that carries only a viewBox has no intrinsic size, so in any context
   without a sizing rule it resolves to its container's width. That is how the
   truck in .counter-bar rendered at 868x868 and swallowed the page. Nothing
   here relies on remembering to add a rule per component — app.css sets a
   floor on the bare `svg` element and the scale below is what it reads.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- colour
     The gate itself: slate chrome, concrete canvas, and amber as the single
     signal colour — the hazard stripe on the barrier. */
  --ink:        #10151c;   /* slate, blue-shifted near-black */
  --steel:      #1b2430;   /* raised chrome */
  --steel-soft: #2c3948;
  --concrete:   #eef1f4;   /* app canvas — readable in daylight */
  --surface:    #ffffff;
  --line:       #d7dee6;
  --line-soft:  #e6ebf0;
  --muted:      #5f6c7b;
  --amber:      #f2a600;   /* barrier / signal */
  --amber-deep: #c98600;
  --amber-wash: #fff8e8;
  --green:      #12916a;   /* exited */
  --red:        #c62f2f;   /* denied / overdue */

  /* Status washes — the backgrounds behind badges, alerts and flagged rows.
     Named by meaning, not by hue, so a status can be restyled in one place. */
  --wash-ok:     #e6f6f0;
  --wash-ok-ink: #0d6f52;
  --wash-ok-line:#b9e4d5;
  --wash-warn:   #fff4e0;
  --wash-bad:    #fdecec;
  --wash-bad-ink:#9c2020;
  --wash-bad-line:#f3c4c2;
  --wash-info:   #eaf3fb;
  --wash-info-ink:#1b4f7d;
  --wash-info-line:#c3ddf2;
  --wash-row:    #f7f9fb;   /* table headers, zebra, tfoot */
  --wash-danger-bg: #fffafa;

  /* ----------------------------------------------------------------- type
     Cairo throughout. The scale is deliberately shallow: this is a tool for
     reading numbers at a barrier, not an editorial page. Page titles step
     down on small screens; nothing else changes size across breakpoints. */
  --font: 'Cairo', 'Segoe UI', system-ui, sans-serif;

  --fs-page-title: 22px;   /* raised to --fs-page-title-lg from 1024px up */
  --fs-page-title-lg: 28px;
  --fs-section: 17px;
  --fs-body: 15px;
  --fs-body-lg: 16px;
  --fs-label: 13px;
  --fs-sm: 14px;         /* dense tables, secondary meta — between label and body */
  --fs-hint: 12.5px;
  --fs-eyebrow: 11px;
  --fs-nav: 14px;
  --fs-nav-short: 11px;    /* phone bottom bar */
  --fs-plate: 22px;        /* big enough to type in gloves, not a headline */
  --fs-kpi: 26px;
  --fs-display: 44px;      /* the login panel wordmark — the one type set this large */
  --fs-ticket: 34px;
  /* The gate ticket is the one number a guard reads across a lit booth, so it
     scales with the viewport instead of sitting at a fixed size. */
  --fs-ticket-fluid: clamp(2.1rem, 11vw, 3.4rem);

  --lh-tight: 1.25;
  --lh-body: 1.6;

  /* ---------------------------------------------------------------- icons
     Every inline SVG resolves to one of these. --icon-md is the global
     default applied to the bare `svg` element in app.css. */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 18px;         /* default for any icon without its own rule */
  --icon-lg: 20px;
  --icon-nav: 22px;
  --icon-brand: 20px;
  --icon-tile: 22px;       /* inside a .hub__icon / .quick__btn */
  --icon-illus: 56px;      /* empty-state illustration — hard cap 120px */
  --icon-illus-max: 120px;

  /* -------------------------------------------------------------- spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* --------------------------------------------------------------- shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(16, 21, 28, .06), 0 2px 8px rgba(16, 21, 28, .05);
  --shadow-2: 0 6px 24px rgba(16, 21, 28, .12);

  /* -------------------------------------------------------------- layout */
  --tap: 46px;             /* minimum touch target */
  --header-h: 56px;
  --nav-h: 66px;           /* phone bottom bar, over the 44px floor */
  --chrome-h: 62px;        /* header + barrier rule */
  --sidebar-w: 250px;
  --sidebar-pad: 10px;     /* inner gutter — keeps the active stripe INSIDE */
  --content-max: 1100px;
  --focus-max: 620px;      /* single-purpose screens: entry, exit, password */
}

@media (min-width: 1024px) {
  :root { --fs-page-title: var(--fs-page-title-lg); }
}