/* ============================================================
   41stkxshift Casino Hotel — 41stkxshift.com
   Direction: Cold cinematic technology (2026)
   Deep navy, ice-blue accents, Playfair Display + Libre Franklin.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  color-scheme: dark;

  /* Surfaces — deep navy */
  --bg: #07111f;
  --bg-soft: #0b1829;
  --surface: #10233a;
  --surface-2: #0c1c30;
  --surface-sunk: #040b14;
  --surface-raise: #17304c;

  /* Ink / text — cool white */
  --ink: #f7fbff;
  --text: #eaf2ff;
  --text-muted: #b8c8dc;
  --text-faint: #8498b2;
  --on-accent: #03101d;

  /* Lines — cool silver */
  --border: rgba(170, 184, 204, 0.16);
  --border-strong: rgba(170, 184, 204, 0.3);
  --rule: rgba(170, 184, 204, 0.12);

  /* Brand accent — electric blue */
  --accent: #58b7ff;
  --accent-soft: #9bd7ff;
  --accent-tint: rgba(88, 183, 255, 0.14);
  --accent-ink: #72c4ff;
  --accent-bright: #8bd1ff;
  --accent-line: rgba(88, 183, 255, 0.5);

  /* Warning / responsible accent */
  --warn: #ffbd59;
  --warn-soft: #ffd58c;
  --warn-tint: rgba(255, 189, 89, 0.14);

  /* Status (AA on dark) */
  --good: #66d5b4;
  --good-tint: rgba(102, 213, 180, 0.14);

  /* Type */
  --font-display:
    "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:
    "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* Fluid type scale */
  --fs-h1: clamp(2.4rem, 1.6vw + 1.6rem, 4.2rem);
  --fs-h2: clamp(1.7rem, 1vw + 1.3rem, 2.8rem);
  --fs-h3: clamp(1.25rem, 0.5vw + 1.05rem, 1.7rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-cap: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.7;

  --track-tight: -0.015em;
  --track-cap: 0.16em;

  /* Spacing (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 112px;

  /* Layout */
  --maxw: min(1280px, 92vw);
  --maxw-narrow: min(720px, 92vw);
  --maxw-wide: min(1440px, 96vw);
  --grid-cols: 12;
  --gap: 24px;
  --gap-tight: 16px;

  /* Radii — restrained, editorial */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Shadows — deep navy + blue hairline */
  --shadow-1: 0 1px 2px rgba(0, 5, 14, 0.55), 0 12px 32px rgba(0, 5, 14, 0.48);
  --shadow-2:
    0 24px 60px rgba(0, 5, 14, 0.68), 0 0 0 1px rgba(88, 183, 255, 0.1);
  --shadow-gold:
    0 0 0 1px rgba(88, 183, 255, 0.32), 0 12px 40px rgba(47, 128, 237, 0.14);
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 280ms;
  --dur-slow: 600ms;

  /* Focus */
  --focus: 2px solid var(--accent);
  --focus-offset: 3px;

  /* Header height for sticky offsets */
  --header-h: 72px;
}