/* Hi-Whyders design tokens — THE canonical set (TCH-016, design, sprint-1; R12).
   One source: every page, the SVG seat map (outputs/svg/svgmap.py TOKENS) and the 3D page (outputs/map3d/src/app.css)
   take their values from here. `sync_tokens.py` writes these values into both lane blocks under the same names.

   Look: "Ultraviolet" (the user's pick, design-005; palette round outputs/design/palette-xray/, option O6 v3). A black
   light: an indigo night, periwinkle neon, aqua-teal free seats, magenta booked, warm gold held, deep violet for your
   own seat, and the seat you pick glowing like a UV lamp (a near-white lavender core in a violet halo). Two warm
   accents used sparingly: hot pink for "exit / attention", amber for "live / time". Desktop-first.
   The previous palette (black, electric blue, cyan, traffic-light seats) is in operative/palette/before-o6/.
   Every other stylesheet reads these: components.css, site.css and admin.css mix them with color-mix(), never a literal.

   Section A names are shared with the map lanes (keep them). Section B is the UI layer for the Django pages. */

:root {
  /* ── A · shared with the map lanes ───────────────────────────────────────────────────────────── */

  /* surfaces */
  --hw-bg-0: #06051a;                 /* page: indigo night (was #000000) */
  --hw-bg-1: #0b0a26;                 /* panels, the map's floor plate */
  --hw-bg-2: #161440;                 /* raised: hover rows, active nav, inputs */

  /* brand light */
  --hw-electric: #8a8aff;             /* THE brand light, periwinkle: primary actions, focus, the logo's glow (was #1f8fff) */
  --hw-glow: #a5a3ff;                 /* structural neon: wall tops, desk edges, hairlines that glow (was cyan #3ff4ff) */
  --hw-accent: #ff4fa0;               /* accent 1, hot pink: exits, network gear, rare emphasis */

  /* map materials */
  --hw-glass: #a5a3ff;
  --hw-floor: #121038;
  --hw-grid: #6d6ad9;
  --hw-fixture: #9a97c9;
  --hw-fireplace: #ff8a6b;
  --hw-fridge: #6fb6ff;

  /* ink */
  --hw-ink: #f1f0ff;                  /* body text: 17.9:1 on --hw-bg-0 */
  --hw-ink-2: #c0bee6;                /* secondary: 9.7:1 on --hw-bg-2 */
  --hw-ink-3: #9996c8;                /* captions, meta: 6.2:1 on --hw-bg-2 */

  /* seat states. The seat you pick no longer keeps the free colour (D-008 rev 2, revised by the user's pick of O6:
     "your selection" was unclear); it takes the four -fill aliases below and glows as a UV lamp, with its ring + pulse */
  --seat-free: #2fe0c0;               /* aqua-teal (was green #22e07a) */
  --seat-selected: #7a4cff;           /* D-008's original "selection" slot; no rule reads it while the -fill aliases set the pick */
  --seat-mine: #7a4cff;               /* your own confirmed seat (D-030): deep UV violet for you, magenta for everyone else */
  --seat-booked: #ff4f8b;             /* magenta (was red #ff3b4d) */
  --seat-prebooked: #ffd66b;          /* warm gold (was #ffc93c) */
  --seat-unavailable: #2e2b52;
  /* derived shades (svgmap.py led_for / deep_for / glass_for compute the same from the six colours above) */
  --seat-free-led: #78ebd6; --seat-selected-led: #a98bff; --seat-mine-led: #a98bff; --seat-booked-led: #ff8db4; --seat-prebooked-led: #ffe49f; --seat-unavailable-led: #77758f;
  --seat-free-deep: #0e433a; --seat-selected-deep: #25174c; --seat-mine-deep: #25174c; --seat-booked-deep: #4c182a; --seat-prebooked-deep: #4c4020; --seat-unavailable-deep: #0e0d19;
  --seat-free-glass: #5bb4a4; --seat-selected-glass: #9079d2; --seat-mine-glass: #9079d2; --seat-booked-glass: #d37b99; --seat-prebooked-glass: #dac690; --seat-unavailable-glass: #363548;
  /* the seat you pick keeps the free colour and flames in it; only a confirmed seat turns ultraviolet (--seat-mine).
     TCH-016 D-089, the user: "if spot is green, selecting make it flame in green. After its confirmed to "your spot" it
     turns to ultraviolet. This way we do not confuse user what is confirmed and what is not." (revises D-086's UV pick;
     D-008 rev 2 again). Three layers: identity (ring, legend dot, 2D lamp, edges), lit core, 3D halo (plume, rim, floor) */
  --seat-selected-fill: #2fe0c0;      /* = --seat-free */
  --seat-selected-led-fill: #78ebd6;  /* = --seat-free-led: the lit core and the LED digits */
  --seat-selected-deep-fill: #0e433a; /* = --seat-free-deep */
  --seat-selected-glass-fill: #5bb4a4;/* = --seat-free-glass */
  --seat-selected-glow: #2fe0c0;      /* the green flame (map3d.js: the plume, rim and floor glow of the picked seat) */

  /* chrome */
  --hw-panel: color-mix(in srgb, var(--hw-bg-1) 78%, transparent);
  --hw-edge: color-mix(in srgb, var(--hw-glow) 22%, transparent);
  --hw-edge-2: color-mix(in srgb, var(--hw-glow) 50%, transparent);

  /* type families: the GUI kit's Roboto trio (the user's ruling, D-050), self-hosted from fonts/ (fonts.css, sync_fonts.py),
     system fonts behind it; the counters keep the earlier system mono (--hw-counter) */
  --hw-sans: "Roboto", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --hw-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --hw-cond: "Roboto Condensed", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --hw-counter: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── B · UI layer (pages only) ───────────────────────────────────────────────────────────────── */

  --hw-accent-2: #ffb86b;             /* accent 2, warm amber: the clock / countdown, "live now" (11.8:1 on --hw-bg-0) */
  --hw-focus: var(--hw-glow);
  --hw-on-electric: #000000;          /* text on --hw-electric: 7.2:1 (white would be 2.9:1) */
  --hw-danger: var(--seat-booked);
  --hw-ok: var(--seat-free);

  /* type scale (desktop-first; 16 px body) */
  --hw-text-xs: 12px;
  --hw-text-sm: 14px;
  --hw-text-md: 16px;
  --hw-text-lg: 20px;
  --hw-text-xl: 28px;
  --hw-text-2xl: 40px;
  --hw-text-display: clamp(44px, 6vw, 80px);
  --hw-leading: 1.55;
  --hw-leading-tight: 1.15;
  --hw-track-caps: .16em;             /* uppercase mono labels */
  --hw-track-tight: -.02em;           /* large headings */

  /* space (4-px grid) */
  --hw-space-1: 4px;  --hw-space-2: 8px;  --hw-space-3: 12px; --hw-space-4: 16px;
  --hw-space-5: 24px; --hw-space-6: 32px; --hw-space-7: 48px; --hw-space-8: 64px; --hw-space-9: 96px;

  /* shape */
  --hw-radius-1: 4px;
  --hw-radius-2: 8px;
  --hw-radius-3: 14px;
  --hw-radius-pill: 999px;
  --hw-hairline: 1px solid var(--hw-edge);

  /* light (glow, never drop shadows: this is a dark UI) */
  --hw-glow-1: 0 0 0 1px var(--hw-edge), 0 0 18px color-mix(in srgb, var(--hw-electric) 16%, transparent);
  --hw-glow-2: 0 0 0 1px var(--hw-edge-2), 0 0 28px color-mix(in srgb, var(--hw-glow) 22%, transparent);

  /* motion */
  --hw-dur-1: 120ms;
  --hw-dur-2: 240ms;
  --hw-dur-3: 600ms;
  --hw-ease: cubic-bezier(.2, .8, .2, 1);

  /* layout */
  --hw-content: 1180px;
  --hw-nav-h: 64px;
}