/* ============================================================
   AMBER PHOSPHOR — design tokens
   insomniax. Single source of truth for color, type, space, motion.

   Carried forward verbatim from the live coming-soon page
   (dev/site/assets/coming-soon.css:9-18). Nothing is discarded.
   Full rationale + contrast audit: docs/website/DESIGN-SYSTEM.md
   ============================================================ */

:root {
  /* --- surface ------------------------------------------------ */
  --night:   #0A0812;   /* page ground. also <meta name="theme-color"> */
  --night2:  #0F0C18;   /* raised ground, nav and footer bars */
  --panel:   #12101C;   /* panel fill. new in Amber Phosphor */

  /* --- ink ---------------------------------------------------- */
  --cream:   #EFEAD8;   /* body text */
  --muted:   #8A82A0;   /* secondary text, never below 16px */

  /* --- brand -------------------------------------------------- */
  --eye:     #FFB81C;   /* amber phosphor. Moe's eyes. the primary accent */
  --violet:  #B79AE6;   /* lightened from #9A6BD6 for AA. DO NOT DARKEN */
  --plum:    #7B2D8E;   /* deep violet, decoration only, never text */
  --ember:   #FF6A2B;   /* the one CTA color */

  /* --- semantic ----------------------------------------------- */
  --ok:      #6FCF8B;   /* in stock, seats open, confirmed */
  --warn:    #FFB81C;   /* low stock, last seats. aliases --eye */
  --bad:     #FF6A2B;   /* sold out, closed. aliases --ember. AA only, fails AAA */
  --bad-text: #FF9166;  /* error TEXT. --ember fails AAA at 6.96; this clears at 8.99.
                           matches .formnote.err in dev/site/assets/coming-soon.css:134 */

  /* --- structure ---------------------------------------------- */
  --rule:        rgba(255, 184, 28, 0.28);  /* default border */
  --rule-strong: rgba(255, 184, 28, 0.55);  /* emphasis border, focus */
  --rule-quiet:  rgba(138, 130, 160, 0.24); /* table hairlines */
  --bevel-lit:   rgba(255, 184, 28, 0.34);  /* bevel top + left, dark chrome */
  --bevel-dim:   rgba(0, 0, 0, 0.72);       /* bevel bottom + right, dark chrome */
  /* Bevels for a FILLED control. Translucent white and black, so one pair
     serves the amber fill and the ember fill and no component needs a raw hex. */
  --bevel-lit-a: rgba(255, 255, 255, 0.55); /* bevel top + left on a filled control */
  --bevel-dim-a: rgba(0, 0, 0, 0.42);       /* bevel bottom + right on a filled control */

  /* --- borders ------------------------------------------------
     Thicker on mobile: 1px hairlines vanish on high-DPI phones.
     Overridden down to 1px at the dense desktop breakpoint below. */
  --bw:      2px;
  --bw-thick: 3px;
  --radius:  0;         /* global. sharp corners are the whole point */

  /* --- shadow -------------------------------------------------
     Hard offset, zero blur. Cheaper to composite than a soft shadow
     and it is the neo-brutalist signature. */
  --shadow:      4px 4px 0 var(--bevel-dim);
  --shadow-tight: 2px 2px 0 var(--bevel-dim);

  /* --- type --------------------------------------------------- */
  --mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, "SF Mono",
          "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --display: "Departure Mono", var(--mono);

  /* --- density ------------------------------------------------
     Density is a setting, not a layout. Touch defaults are the base
     case; the dense case is opt-in and gated on POINTER, not width,
     because a touchscreen laptop still needs 44px targets. */
  --pad:    12px;
  --pad-lg: 20px;
  --row-h:  44px;
  --tap:    44px;   /* WCAG 2.2 SC 2.5.8 floor is 24px. 44 is the real target. */
  --fs:     16px;   /* never below 16 on mobile: also blocks iOS input zoom */
  --lh:     1.4;

  /* --- space -------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --measure: 66ch;  /* max line length for prose */

  /* --- layers -------------------------------------------------
     A raw z-index literal anywhere else is a bug. */
  --z-base:    0;
  --z-rail:    10;   /* sticky desktop facet rail */
  --z-sticky:  20;   /* sticky header, footer status bar, mobile filter bar */
  --z-nav:     30;   /* header nav, open disclosure menus */
  --z-pop:     35;   /* typeahead listbox. above the nav it hangs from */
  --z-scrim:   38;   /* mobile bottom-sheet scrim */
  --z-sheet:   40;   /* mobile bottom sheet */
  --z-fx:      50;   /* grain / scanline / vignette, home hero only */
  --z-skip:   100;   /* skip-to-content link */

  /* --- motion -------------------------------------------------
     Every duration here is overridden to 0 under prefers-reduced-motion
     in base.css. Nothing animates longer than 200ms. */
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-view: 150ms;  /* view-transition ceiling. longer feels SLOWER than instant. */
}

@media (min-width: 1024px) and (pointer: fine) {
  :root {
    --pad:    5px;
    --pad-lg: 12px;
    --row-h:  28px;
    --fs:     13px;
    --lh:     1.25;
    --bw:     1px;
    --bw-thick: 2px;
    /* --tap is deliberately absent. A 28px row is fine; a 28px button is not. */
  }
}

/* Density is a setting, not a layout. The status-bar DENSITY toggle writes
   data-density on <html>; these attribute selectors beat the media query in
   BOTH directions, so a mouse user can force comfortable and a touch user can
   force dense. There is no settings page and no other control reaches this. */
:root[data-density="comfortable"] {
  --pad: 12px; --pad-lg: 20px; --row-h: 44px; --fs: 16px; --lh: 1.4;  --bw: 2px; --bw-thick: 3px;
}
:root[data-density="dense"] {
  --pad: 5px;  --pad-lg: 12px; --row-h: 28px; --fs: 13px; --lh: 1.25; --bw: 1px; --bw-thick: 2px;
}