/*
 * WARP theme — the single source of truth for COLOURS, and nothing else.
 *
 * Loaded in base.html before the webpack base bundle. Intentionally pure colour:
 * a deployment can swap it (or mount a replacement via WARP_THEME_FILE) to
 * re-skin WARP with zero risk of breaking layout — there are no selectors here
 * that target framework internals, only --warp-* custom properties. Everything
 * structural (M3 mappings, affordance classes, the spacing/radius scale) lives
 * in js/base/style.css.
 *
 * LAYERS (top to bottom): BRAND knobs → derived brand tints → semantic roles →
 * neutral roles → rgba channels. The app consumes ROLES, never raw values.
 *   - RE-BRAND: change --warp-primary / --warp-secondary (± --warp-error).
 *   - DARK MODE (step 3): a :root[theme="dark"] block overrides the *neutral
 *     roles* + *channels* below; brand tints re-mix against the new surface
 *     automatically. Nothing in the app needs to change.
 *
 * Brand is the Xperi palette: primary = deep violet (#4f3493),
 * secondary = pink/magenta (#e4146e). Both drawn from the Xperi brand book;
 * the violet is the darkest primary (AA-safe with white text) and the magenta
 * is the signature Xperi accent.
 */
:root {
  /* ===== BRAND — the only knobs to change for a re-brand ================== */
  --warp-primary:   #4f3493;  /* Xperi violet — nav, buttons, focus, links, primary actions */
  --warp-secondary: #e4146e;  /* Xperi magenta — FAB, tabs, selected rows, default btn, accents */

  /* Top-bar fill — a single themeable slot: a solid colour, a gradient, or a
     url() image. The bundle applies it via `background: var(--warp-nav-bg,
     var(--warp-primary))`, so leaving it unset falls back to the flat primary,
     and a deployment can re-skin the bar by overlaying theme.css alone. */
  --warp-nav-bg: linear-gradient(160deg, #b2325d, #3B2550);
  --warp-nav-logo-bg: #ffffff;  /* WARP wordmark fill on the nav bar (masked logo.svg) — white reads on the gradient in both themes */

  /* Brand tints, derived so a re-brand recolours them. Background tints mix
     against --warp-surface so they flip for free in dark mode; accent fills mix
     against white/black. Override any single one with a literal if needed. */
  --warp-primary-light: color-mix(in srgb, var(--warp-primary), white 20%);                 /* hover/active accents */
  --warp-primary-dark:  color-mix(in srgb, var(--warp-primary), black 25%);                 /* seat-label zone text (override in dark theme) */
  --warp-primary-tint:  color-mix(in srgb, var(--warp-primary), var(--warp-surface) 75%);   /* slider track, zone border */
  --warp-primary-pale:  color-mix(in srgb, var(--warp-primary), var(--warp-surface) 90%);   /* seat-label zone bg */
  --warp-secondary-pale:color-mix(in srgb, var(--warp-secondary), var(--warp-surface) 70%); /* spinner top/right/bottom */

  /* ===== SEMANTIC ROLES ================================================== */
  --warp-error:    #c62828;  /* deep red — delete/danger button + icon (AA-safe with white text; kept redder than the magenta secondary so "danger" stays distinct) */
  --warp-success:  #2e8540;  /* green — seat status "free/available" ONLY */
  --warp-edit:     var(--warp-secondary);  /* edit/manage icons; retarget if secondary is wrong for an icon */
  --warp-on-brand: #ffffff;  /* text/icons ON a brand-coloured fill (buttons, headers, titles) — stays light in dark mode */

  /* ===== SEAT STATUS ==================================================== */
  /* Seat sprites: each #cell-<name> in seat_icons.svg reads these via an
     external <use>. -fg is the ring/glyph colour, -bg is the disc base. Split
     between light and dark below; dark mirrors light for now (tweak the dark
     block later). -fg is a literal hex so each status is independent of the
     brand/neutral tokens; -bg is a light tint of -fg (a solid knockout base for
     the rings/arrows over it). */
  --warp-seat-available-fg:   #2e8540;  /* green — free / available seat */
  --warp-seat-available-bg:   color-mix(in srgb, var(--warp-seat-available-fg), white 80%);
  --warp-seat-yours-fg:       #4f3493;  /* Xperi violet — your / assigned seat */
  --warp-seat-yours-bg:       color-mix(in srgb, var(--warp-seat-yours-fg), white 80%);
  --warp-seat-unavailable-fg: #616161;  /* grey — unavailable / booked / boss seat */
  --warp-seat-unavailable-bg:  color-mix(in srgb, var(--warp-seat-unavailable-fg), white 80%);

  /* ===== NEUTRAL ROLES — a dark theme overrides THESE ==================== */
  --warp-surface:     #ffffff;  /* card/modal/input/seat-label/sidepanel surface */
  --warp-text:        #212121;  /* primary body/heading text (on surface) */
  --warp-grey-bg:     #f5f5f5;  /* page/section fill, footers, hover, slider-handle inner shadow */
  --warp-grey-border: #e0e0e0;  /* borders, dividers, disabled FAB, slider-handle border */
  --warp-grey-muted:  #9e9e9e;  /* disabled text/icons, slider-handle outer shadow */
  --warp-grey-text:   #616161;  /* secondary text, labels, unavailable/boss/booked seats */

  /* ===== CHANNELS — "r, g, b" for rgba(var(--…), α); a dark theme flips the
     neutral channels (shadow→light glow, surface→dark) ==================== */
  --warp-primary-rgb:   79, 52, 147;
  --warp-secondary-rgb: 228, 20, 110;
  --warp-error-rgb:     198, 40, 40;
  --warp-surface-rgb:   255, 255, 255;  /* translucent surface overlays (loaders, dimmed numerals) */
  --warp-shadow-rgb:    0, 0, 0;        /* drop shadows */
}

/* ===========================================================================
 * DARK THEME — activated by <html theme="dark"> (set from the warp_theme cookie).
 * Overrides only the neutral roles, the two neutral channels, and the brand
 * primary (the deep violet is too dark to read on a dark surface, so it lightens
 * to a lavender). Brand tints re-mix against the new --warp-surface automatically;
 * --warp-secondary / --warp-error / --warp-success / --warp-on-brand are
 * unchanged (they read fine on dark). Tune these values to taste.
 * =========================================================================== */
:root[theme="dark"] {
  --warp-primary:      #a78bda;  /* lightened violet so nav/buttons/focus read on dark */
  --warp-primary-dark: color-mix(in srgb, var(--warp-primary), white 22%);  /* links lighten on dark */

  /* Top-bar fill on a dark page. */
  --warp-nav-bg: linear-gradient(90deg, #4D182C, #2C0E19);

  --warp-surface:     #1e1e1e;  /* cards, modals, inputs, seat-label */
  --warp-text:        #e6e6e6;  /* body/heading text on dark */
  --warp-grey-bg:     #121212;  /* page/section fill, footers, hover */
  --warp-grey-border: #3a3a3a;  /* borders, dividers */
  --warp-grey-muted:  #707070;  /* disabled text/icons */
  --warp-grey-text:   #b3b3b3;  /* secondary text, labels, unavailable/boss/booked seats */

  --warp-surface-rgb: 30, 30, 30;  /* translucent surface overlays */

  /* Seat status — dark mode: brighter -fg (reads on a dark disc) and -bg as a
     dark tint of -fg mixed with black (the inverse of light's white tint), so
     the disc is a dark version of the seat colour and the bright ring/glyph pop.
     -bg is redeclared here (not inherited) because its formula flips white→black. */
  --warp-seat-available-fg:   #3abb41;
  --warp-seat-available-bg:   color-mix(in srgb, var(--warp-seat-available-fg), black 80%);
  --warp-seat-yours-fg:       #b39ddb;  /* lightened Xperi violet — your seat on dark */
  --warp-seat-yours-bg:       color-mix(in srgb, var(--warp-seat-yours-fg), black 80%);
  --warp-seat-unavailable-fg: #9e9e9e;
  --warp-seat-unavailable-bg:  color-mix(in srgb, var(--warp-seat-unavailable-fg), black 80%);
}