/* ================================================================
   JRLG KIOSK - THEME
   Black / white / gray palette per Ashton's direction 2026-04-21.
   When brand hex codes are finalized, update the --accent tokens.
   ================================================================ */

:root {
  /* Core palette */
  --bg: #0A0A0A;
  --bg-elev-1: #141414;
  --bg-elev-2: #1E1E1E;
  --fg: #FFFFFF;
  --fg-muted: #B8B8B8;
  --fg-dim: #707070;
  --border: #2A2A2A;
  --border-strong: #3F3F3F;

  /* Accent - neutral gray placeholder. Swap to gold when brand colors land. */
  --accent: #E0E0E0;
  --accent-contrast: #0A0A0A;

  /* Semantic */
  --danger: #FF4D4D;
  --success: #4DE0A1;

  /* Sizes tuned for 2160x3840 portrait 4K */
  --screen-padding: 80px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 20px 60px rgba(0, 0, 0, 0.7);

  /* Typography */
  --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Font sizes - lobby reads at 3-4 feet, scale up */
  --fs-display: 180px;
  --fs-h1: 120px;
  --fs-h2: 72px;
  --fs-h3: 48px;
  --fs-body: 36px;
  --fs-caption: 28px;
  --fs-nav: 32px;

  /* Animation */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 360ms;
  --t-slow: 720ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }