/* Design tokens — moved as-is from the approved mockup
 * mockups/luckyliner.co/b-night-liner.html (:root), 2026-11-06.
 * Palette and fonts are fixed by the brief §21.
 * "added" = not in the mockup, needed to build the whole site.
 * Breakpoints (constants, used in media queries): 1180 · 1040 · 760 · 389.
 */
:root {
  /* colour — brief §21 */
  --color-bg: #101827;
  --color-bg-2: #1C2940;
  --color-brand: #F5B841;
  --color-brand-ink: #1a1405;
  --color-accent: #28C7B7;
  --color-text: #FFFFFF;
  --color-text-2: #C0CBD8;
  --color-text-3: color-mix(in oklch, #C0CBD8 82%, #101827);   /* mockup 68% → 82%: ≥4.5:1 on surface-3 (audit) */
  --color-border: #34445D;

  /* added: states */
  --color-brand-hover: color-mix(in oklch, var(--color-brand) 88%, white);
  --color-error: #FF7A7A;
  --color-success: var(--color-accent);
  --color-warning: var(--color-brand);
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand);

  /* surfaces */
  --surface-0: #0b111d;
  --surface-1: #141f33;
  --surface-2: #1C2940;
  --surface-3: #243452;

  --hair: color-mix(in oklch, #C0CBD8 14%, transparent);
  --hair-2: color-mix(in oklch, #C0CBD8 24%, transparent);
  --hair-gold: color-mix(in oklch, #F5B841 48%, transparent);
  --tint-gold: color-mix(in oklch, #F5B841 14%, transparent);
  --tint-teal: color-mix(in oklch, #28C7B7 16%, transparent);
  --tint-error: color-mix(in oklch, #FF7A7A 14%, transparent);   /* added */

  --sh-1: 0 1px 2px rgb(4 8 16 / .45), 0 8px 24px -12px rgb(4 8 16 / .65);
  --sh-2: 0 1px 2px rgb(4 8 16 / .5), 0 18px 40px -18px rgb(4 8 16 / .85), 0 2px 0 -1px rgb(255 255 255 / .04) inset;
  --sh-3: 0 2px 4px rgb(4 8 16 / .5), 0 32px 64px -24px rgb(4 8 16 / .9);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* type */
  --font-head: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fs-h1: clamp(2.25rem, 1.35rem + 3.3vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 1.9vw, 3rem);
  --fs-h3: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: .875rem;
  --fs-xs: .75rem;
  --fs-page: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem);   /* added: inner-page H1 */

  /* motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.4,.5,1);
  --dur: 220ms;
  --dur-base: 300ms;   /* added (template motion.css) */
  --dur-slow: 800ms;   /* added */

  /* layout */
  --container: 1280px;
  --container-text: 780px;   /* added: legal / long text */
  --gutter: clamp(16px, 4vw, 40px);
  --hdr-h: 84px;
  --sec-y: clamp(72px, 8vw, 116px);

  /* layers — added */
  --z-rail: 40;
  --z-menu: 55;
  --z-header: 60;
  --z-tabbar: 65;
  --z-overlay: 90;
  --z-gate: 100;
  --z-toast: 110;
}
@media (max-width: 1040px) { :root { --hdr-h: 64px; } }
@media (max-width: 760px)  { :root { --hdr-h: 60px; } }