/* ==========================================================================
   Design tokens — shared by the operator console and the booth kiosk.

   Two scales exist on purpose. The console is read at 50 cm on a laptop and
   should be dense; the kiosk is read at 1–2 m by someone holding a drink and
   should be enormous. Both draw from one palette so a print, the console and
   the booth screen look like the same product.
   ========================================================================== */

:root {
  /* -- brand ------------------------------------------------------------
     Two families on purpose:
       *-fill  = a solid background that always carries white text, so it must
                 stay dark in BOTH schemes (white on a light accent is the most
                 common contrast failure in a themed UI).
       plain   = the colour used as text or an icon on a surface, so it flips
                 light in dark mode.
     Every pair below clears WCAG AA (4.5:1) at the 12px badge size. */
  --flash:            #c0442e;   /* accent text and links                   */
  --flash-strong:     #a3341f;
  --flash-soft:       #fdeeea;
  --flash-fill:       #c33f2b;   /* filled button, white label — 5.2:1      */
  --flash-fill-hover: #a83220;   /* 6.7:1                                   */
  --live:             #0f6f66;   /* an event in progress, a healthy printer */
  --live-soft:        #e2f4f2;
  --live-fill:        #0f7a71;   /* 5.2:1 with white                        */
  --live-fill-hover:  #0e6b64;
  --warn:             #8a5209;
  --warn-soft:        #fdf3e3;
  --danger:           #b32d20;
  --danger-soft:      #fdecea;

  /* -- neutrals (warm, so photos sit well against them) ------------------ */
  --ink:      #16181d;
  --ink-2:    #3d424d;
  --ink-3:    #6b7280;
  --ink-4:    #9aa1ad;
  --line:     #e4e2df;
  --line-2:   #efedea;
  --surface:  #ffffff;
  --surface-2:#faf9f7;
  --surface-3:#f2f0ed;
  --canvas:   #f6f5f3;

  /* -- type ------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Georgia", "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;
  --t-2xl:  2rem;
  --t-3xl:  2.75rem;

  /* -- space ------------------------------------------------------------ */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* -- shape ------------------------------------------------------------ */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(22, 24, 29, .06),
              0 1px 3px rgba(22, 24, 29, .04);
  --shadow-2: 0 2px 4px rgba(22, 24, 29, .05),
              0 8px 24px rgba(22, 24, 29, .07);
  --shadow-3: 0 12px 40px rgba(22, 24, 29, .16);

  /* -- motion ----------------------------------------------------------- */
  --fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --base: 220ms cubic-bezier(.4, 0, .2, 1);
  --slow: 400ms cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:      #f3f2f0;
    --ink-2:    #c9c6c1;
    --ink-3:    #9b988f;
    --ink-4:    #94918a;
    --line:     #2f3138;
    --line-2:   #26282e;
    --surface:  #1c1e24;
    --surface-2:#22252b;
    --surface-3:#2a2d34;
    --canvas:   #131519;
    /* Status colours have to be redefined too, not just the surfaces they sit
       on: the light-mode ink on a dark fill is the worst contrast in the app,
       and the red failure message is exactly what an operator needs to read. */
    --flash:        #ff8f7a;
    --flash-strong: #ffab9b;
    --flash-soft:   #3a201b;
    --live:         #45c9ba;
    --live-soft:    #10312e;
    --warn:         #eab255;
    --warn-soft:    #33270f;
    --danger:       #f5867a;
    --danger-soft:  #3a1d19;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .4);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, .55);
  }
}

/* The kiosk overrides the type scale wholesale: every value below is sized
   for a touchscreen read from across a room, and no interactive target is
   ever smaller than 88 px. */
:root.kiosk {
  --t-base: 1.25rem;
  --t-md:   1.5rem;
  --t-lg:   2rem;
  --t-xl:   2.75rem;
  --t-2xl:  4rem;
  --t-3xl:  7rem;
  --touch-min: 88px;
  --r-lg: 20px; --r-xl: 32px;
}