/* ============================================================
   Majestic Bay Casino Resort — majesticbayreview.com
   Direction: Kinetic Glassmorphism 2.0 (2026)
   Deep midnight ground, icy-blue glass cards, cool night resort.
   Cinematic Resort Prologue layout system.
   ============================================================ */

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

  /* Surfaces — deep midnight */
  --bg:            #07111F;  /* deep midnight ground */
  --bg-soft:       #0B1A2E;
  --bg-deep:        #050B16;  /* deeper recess / hero vignette */
  --surface:       rgba(255, 255, 255, 0.06);   /* glass card */
  --surface-2:     rgba(255, 255, 255, 0.10);   /* raised glass */
  --surface-3:     rgba(255, 255, 255, 0.14);   /* hover / focus glass */
  --surface-sunk:  rgba(7, 17, 31, 0.55);
  --glass-hi:      rgba(255, 255, 255, 0.18);   /* hairline highlight */

  /* Ink / text — AA-checked on midnight */
  --ink:           #F7FAFC;   /* headings, max contrast */
  --text:          #E6EDF4;   /* body on midnight (AA) */
  --text-muted:    #B8C1CC;   /* muted (AA on midnight) */
  --text-faint:    #8A97A6;   /* large/caption/meta only */
  --on-accent:     #06223A;   /* text on icy-blue fills */

  /* Lines — translucent borders */
  --border:        rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.26);
  --rule:          rgba(255, 255, 255, 0.08);

  /* Brand accent — icy blue */
  --accent:        #7DD3FC;   /* fills, large display */
  --accent-soft:   #BAE6FD;
  --accent-ink:    #7DD3FC;   /* AA icy-blue text on midnight */
  --accent-tint:   rgba(125, 211, 252, 0.14);
  --accent-line:   rgba(125, 211, 252, 0.45);
  --accent-glow:   rgba(125, 211, 252, 0.35);

  /* Status (AA on midnight) */
  --good:    #86EFAC;
  --warn:    #FCA5A5;
  --promo:   #7DD3FC;

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.6rem, 6vw + 1rem, 6.5rem);
  --fs-h1: clamp(2.1rem, 1.6vw + 1.4rem, 3.6rem);
  --fs-h2: clamp(1.6rem, 1vw + 1.2rem, 2.6rem);
  --fs-h3: clamp(1.2rem, 0.5vw + 1.05rem, 1.6rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-cap: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --track-tight: -0.02em;
  --track-cap: 0.18em;

  /* 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: 96px; --s-10: 128px;

  /* Layout */
  --maxw: min(1280px, 92vw);
  --maxw-narrow: min(860px, 92vw);
  --maxw-wide: min(1600px, 96vw);
  --gap: 24px;
  --gap-tight: 16px;

  /* Radii — soft glass */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows — depth + glow */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.30), 0 12px 32px rgba(0,0,0,0.42);
  --shadow-2: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 12px 40px rgba(125,211,252,0.18);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 0 1px var(--border);

  /* Glass blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 260ms;
  --dur-slow: 600ms;

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

/* Reduced-motion: drop slow transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}