/* =============================================================================
   tokens.css — design tokens for the visitor kiosk.

   Two rules govern everything in static/css:

   1. LOGICAL PROPERTIES ONLY. No `left`/`right` anywhere. The whole product is
      RTL; a physical property is a bug that only shows up on the machine in the
      ticket office, where nobody is looking at a devtools inspector.
   2. Every colour is a custom property, redefined once for dark mode. A kiosk
      lives in a dim ticket office half the day and on a bright forecourt the
      other half, and the OS theme is the only signal we get about which.

   Palette: limestone and desert sand for surfaces, dark basalt for ink, a single
   faience-turquoise accent (the blue-green of Egyptian glazed ware) and a muted
   gold reserved for the permit serial — the one thing on the screen the visitor
   is being handed.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Self-hosted Arabic face. NO CDN and no Google Fonts import: the VPS may have
   no outbound internet at all, and a kiosk that waits on a font request that
   will never resolve shows blank text for three seconds on every boot.

   The woff2 files are NOT in the repo (see fonts/README.md for exactly which
   files to download and where to drop them). Until they are, `local()` picks up
   a system copy if one exists, and the fallback stack below carries the page —
   `font-display: swap` means a missing file costs nothing, it just falls through
   to the next family. The layout is built on the fallback metrics for that
   reason; Cairo is an improvement, never a prerequisite.

   Paths are relative to this stylesheet, so the whole static/ tree can be
   mounted at "/", "/static" or anywhere else without an edit here.
----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cairo';
  src: local('Cairo Regular'), local('Cairo-Regular'),
       url('../fonts/Cairo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: local('Cairo SemiBold'), local('Cairo-SemiBold'),
       url('../fonts/Cairo-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: local('Cairo Bold'), local('Cairo-Bold'),
       url('../fonts/Cairo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* ---- family --------------------------------------------------------- */
  --font-ar: 'Cairo', 'IBM Plex Sans Arabic', 'Noto Sans Arabic',
             'Geeza Pro', 'Dubai', 'Segoe UI', Tahoma, system-ui, sans-serif;
  /* Latin runs (the serial, the national ID) deliberately get a tabular,
     unambiguous face — a permit number is read aloud across a counter. */
  --font-ltr: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono',
              Menlo, Consolas, monospace;

  /* ---- raw palette ---------------------------------------------------- */
  --limestone-50:  #FBF7F0;
  --limestone-100: #F4EDE1;
  --sand-200:      #E9DFCC;
  --sand-300:      #D9CBB0;
  --sand-400:      #C0AE8D;
  --basalt-700:    #4A4032;
  --basalt-800:    #2E2719;
  --basalt-900:    #1B1710;

  --faience-400:   #3FB3A2;
  --faience-500:   #17897C;
  --faience-600:   #0E6F63;
  --faience-700:   #0A554C;

  --gold-400:      #E8C97A;
  --gold-600:      #A9822B;

  --danger-500:    #B23B2E;
  --danger-400:    #E0705F;
  --warn-500:      #9A6B15;
  --ok-500:        #2E7D44;

  /* ---- semantic: light ------------------------------------------------ */
  --bg:            var(--limestone-50);
  --bg-deep:       var(--limestone-100);
  --surface:       #FFFFFF;
  --surface-2:     var(--limestone-100);
  --line:          var(--sand-300);
  --line-soft:     var(--sand-200);

  --ink:           var(--basalt-900);
  --ink-soft:      var(--basalt-700);
  --ink-mute:      #7A6E5C;
  --on-accent:     #FFFFFF;

  --accent:        var(--faience-600);
  --accent-hover:  var(--faience-700);
  --accent-soft:   #E2F1EE;
  --accent-ink:    var(--faience-700);

  --gold:          var(--gold-600);
  --gold-soft:     #FBF1D9;

  --danger:        var(--danger-500);
  --danger-soft:   #FBE9E6;
  --warn:          var(--warn-500);
  --warn-soft:     #FBF1DC;
  --ok:            var(--ok-500);

  /* Video stage backdrop and the dimming outside a capture guide. */
  --stage-bg:      #14110C;
  --scrim:         rgba(20, 17, 12, 0.62);
  --pill-bg:       rgba(20, 17, 12, 0.72);
  --pill-ink:      #FFFFFF;

  /* ---- radii ---------------------------------------------------------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-pill: 999px;

  /* ---- spacing (4px base) --------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;
  --sp-8: 64px;

  /* ---- type scale -----------------------------------------------------
     Floor is 20px: SPEC §10 sets that as the minimum body size, and a visitor
     reading a permit screen may be standing an arm's length back from it.    */
  --fs-sm:     1.0rem;    /* 16px — captions only, never a sentence */
  --fs-body:   1.25rem;   /* 20px */
  --fs-lead:   1.5rem;    /* 24px */
  --fs-title:  clamp(1.75rem, 3.2vw, 2.5rem);
  --fs-hero:   clamp(2.25rem, 5.5vw, 4rem);
  /* The serial is the product. It is sized to be read from the other side of
     a counter, not to fit a layout. */
  --fs-serial: clamp(3.5rem, 13vw, 8rem);

  --lh-tight: 1.2;
  --lh-body:  1.65;

  /* ---- touch ----------------------------------------------------------
     SPEC §10: ≥ 64px. Anything a visitor taps uses one of these two.        */
  --touch:     64px;
  --touch-lg:  88px;

  /* ---- elevation ------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(27, 23, 16, 0.06),
               0 2px 6px rgba(27, 23, 16, 0.05);
  --shadow-md: 0 2px 6px rgba(27, 23, 16, 0.07),
               0 12px 28px rgba(27, 23, 16, 0.09);
  --shadow-lg: 0 6px 16px rgba(27, 23, 16, 0.10),
               0 28px 64px rgba(27, 23, 16, 0.14);
  --ring:      0 0 0 4px var(--accent-soft);

  /* ---- motion ---------------------------------------------------------
     Short and few. A government kiosk that animates is a kiosk that feels
     slow; every transition here is under 200ms and none of them move the
     content a visitor is reading.                                           */
  --dur-fast: 110ms;
  --dur:      180ms;
  --ease:     cubic-bezier(0.2, 0, 0.13, 1);

  --page-max:  1080px;
  --gutter:    clamp(var(--sp-4), 4vw, var(--sp-7));
}

/* -----------------------------------------------------------------------------
   Dark mode. Not an inversion: the surfaces stay warm (dark basalt, not grey)
   so the screen still reads as the same object, and the accent is lifted to the
   400 step because 600 on a dark ground fails contrast.

   Guarded with :root:not([data-theme="light"]) so a forced light theme wins,
   and mirrored under an explicit [data-theme="dark"] for the same reason.
----------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #12100B;
    --bg-deep:     #0C0A07;
    --surface:     #1E1A13;
    --surface-2:   #272117;
    --line:        #3B3427;
    --line-soft:   #2C2619;

    --ink:         #F3ECDE;
    --ink-soft:    #D8CDB8;
    --ink-mute:    #A2977F;
    --on-accent:   #06211E;

    --accent:      var(--faience-400);
    --accent-hover: #55C6B5;
    --accent-soft: #10332F;
    --accent-ink:  var(--faience-400);

    --gold:        var(--gold-400);
    --gold-soft:   #2B2313;

    --danger:      var(--danger-400);
    --danger-soft: #3A1B16;
    --warn:        #E0B25C;
    --warn-soft:   #322611;
    --ok:          #6FCB8A;

    --stage-bg:    #000000;
    --scrim:       rgba(0, 0, 0, 0.66);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.6), 0 32px 72px rgba(0, 0, 0, 0.55);
  }
}

:root[data-theme="dark"] {
  --bg:          #12100B;
  --bg-deep:     #0C0A07;
  --surface:     #1E1A13;
  --surface-2:   #272117;
  --line:        #3B3427;
  --line-soft:   #2C2619;

  --ink:         #F3ECDE;
  --ink-soft:    #D8CDB8;
  --ink-mute:    #A2977F;
  --on-accent:   #06211E;

  --accent:      var(--faience-400);
  --accent-hover: #55C6B5;
  --accent-soft: #10332F;
  --accent-ink:  var(--faience-400);

  --gold:        var(--gold-400);
  --gold-soft:   #2B2313;

  --danger:      var(--danger-400);
  --danger-soft: #3A1B16;
  --warn:        #E0B25C;
  --warn-soft:   #322611;
  --ok:          #6FCB8A;

  --stage-bg:    #000000;
  --scrim:       rgba(0, 0, 0, 0.66);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55), 0 14px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.6), 0 32px 72px rgba(0, 0, 0, 0.55);
}

/* A visitor on a kiosk never asked for motion. When the OS says so, we give it
   none — including the steady-progress bar, which stays meaningful because its
   width is data, not decoration. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}