/* ============================================================
   Golden Aria Casino Hotel — goldenariaresort.com
   Direction: Cinematic Scrollytelling Dark Luxury (2026)
   Near-black ground, warm gold, Playfair Display + Libre Franklin.
   Film grain, chapter heroes, sticky verdict card, time-journey.
   ============================================================ */

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

  /* Surfaces — near-black velvet */
  --bg:           #080604;  /* ground */
  --bg-soft:      #0E0A07;
  --surface:       #16110D;  /* card surface */
  --surface-2:     #120D09;
  --surface-sunk:  #050403;  /* deeper recess */
  --surface-raise: #1F1812;  /* slightly raised card */

  /* Ink / text — warm parchment (AA-checked on dark surfaces) */
  --ink:           #F4EFE7;  /* headings */
  --text:          #E6DFD2;  /* body text on dark */
  --text-muted:    #C7BBA6;  /* AA on dark surfaces */
  --text-faint:    #8E8270;  /* large/caption/meta only */
  --on-accent:     #1A1208;  /* text on gold fills */

  /* Lines — low-alpha parchment */
  --border:        rgba(244, 239, 231, 0.10);
  --border-strong: rgba(244, 239, 231, 0.20);
  --rule:          rgba(244, 239, 231, 0.08);

  /* Brand accent — warm gold */
  --accent:        #C7A46B;  /* fills, borders, large display */
  --accent-soft:   #E0C294;
  --accent-tint:   rgba(199, 164, 107, 0.12);
  --accent-ink:    #D9B983;  /* AA gold text on dark */
  --accent-bright: #E9C46A;
  --accent-line:   rgba(199, 164, 107, 0.45);

  /* Warning / responsible accent — amber */
  --warn:          #E9C46A;
  --warn-soft:     #F0D78A;
  --warn-tint:     rgba(233, 196, 106, 0.14);

  /* Status (AA on dark) */
  --good:    #8FB089;
  --good-tint: rgba(143, 176, 137, 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, 1.0vw + 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 velvet + gold hairline */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.50), 0 12px 32px rgba(0,0,0,0.45);
  --shadow-2: 0 24px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(199,164,107,0.08);
  --shadow-gold: 0 0 0 1px rgba(199,164,107,0.30), 0 12px 40px rgba(199,164,107,0.10);
  --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;
}