/* =====================================================================
   CASINOSHKA — Foundations: Color + Type
   Luxury high-roller online casino. Deep felt-green + gold + black,
   red for live/heat. Monte-Carlo elegance, modern iGaming.
   ---------------------------------------------------------------------
   Fonts via Google Fonts (SUBSTITUTION — no original brand fonts exist;
   these were selected to fit the luxury direction. See README "Fonts").
   Display : Bodoni Moda  (high-contrast Didone — drama, fashion-luxury)
   UI/Body : Hanken Grotesk (clean humanist grotesque — legible, modern)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&display=swap');

:root {
  /* ---------- BACKGROUNDS (near-black, green undertone) ---------- */
  --ink-900: #070B08;   /* deepest void */
  --ink-800: #0A0F0C;   /* page base */
  --felt-900: #0B1A12;  /* deep felt */
  --felt-800: #0E241A;  /* felt */
  --surface-1: #11261C; /* card */
  --surface-2: #173322; /* raised card / hover */
  --surface-3: #1E4030; /* highest lift */

  /* ---------- FELT GREEN (baize) ---------- */
  --green-800: #0A4329;
  --green-700: #0E5C3A; /* primary felt */
  --green-600: #12774A;
  --green-500: #189A5E; /* bright / success */
  --green-400: #2BBE7B;

  /* ---------- GOLD (the hero) ---------- */
  --gold-800: #6E561A;
  --gold-700: #8A6D1F;
  --gold-600: #B8902F;
  --gold-500: #D4AF37; /* classic casino gold */
  --gold-400: #E4C45C;
  --gold-300: #F1DA8C; /* champagne highlight */
  --gold-200: #FBEFC4;
  /* foil gradient — use for wordmark, primary CTA, jackpot numerals */
  --gold-foil: linear-gradient(155deg, #F8E7A6 0%, #D4AF37 34%, #A8801F 62%, #E9C969 100%);
  --gold-foil-soft: linear-gradient(160deg, #E4C45C 0%, #BE942C 100%);

  /* ---------- RED (live / hot / wins) ---------- */
  --red-700: #8E0E20;
  --red-600: #B11226;
  --red-500: #D7263D; /* vivid */
  --red-400: #F0445A;

  /* ---------- TEXT / IVORY ---------- */
  --fg-1: #F6F1E4;  /* primary — warm ivory */
  --fg-2: #C7BFA8;  /* secondary — muted warm */
  --fg-3: #8C846E;  /* tertiary / captions */
  --fg-gold: #E4C45C;
  --fg-on-gold: #1A1206; /* text on gold surfaces */
  --fg-on-green: #F6F1E4;

  /* ---------- LINES / STROKES ---------- */
  --hairline: rgba(212,175,55,0.16);   /* gold hairline */
  --hairline-soft: rgba(246,241,228,0.08);
  --hairline-strong: rgba(212,175,55,0.40);

  /* ---------- SEMANTIC ---------- */
  --success: var(--green-500);
  --danger:  var(--red-500);
  --warning: var(--gold-400);
  --live:    var(--red-500);

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- SPACING (4pt) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- ELEVATION / SHADOW ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 10px 28px rgba(0,0,0,.45);
  --shadow-3: 0 28px 64px rgba(0,0,0,.58);
  --inset-sheen: inset 0 1px 0 rgba(246,241,228,.06);
  --glow-gold: 0 0 0 1px rgba(212,175,55,.45), 0 10px 34px rgba(212,175,55,.20);
  --glow-green: 0 0 0 1px rgba(24,154,94,.40), 0 10px 30px rgba(24,154,94,.20);
  --glow-red: 0 0 0 1px rgba(215,38,61,.45), 0 8px 26px rgba(215,38,61,.28);

  /* ---------- MOTION ---------- */
  --ease-lux: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Playfair Display', 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-ui: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Playfair Display', 'Bodoni Moda', Georgia, serif; /* big jackpot numerals */

  /* ---------- SEMANTIC TYPE TOKENS ---------- */
  /* Display & headings use the Didone; UI uses the grotesque. */
  --display-size: clamp(48px, 7vw, 104px);
  --display-weight: 600;
  --display-lh: 0.98;
  --display-ls: -0.01em;

  --h1-size: clamp(36px, 4.4vw, 60px);
  --h1-weight: 600;
  --h1-lh: 1.04;

  --h2-size: clamp(26px, 3vw, 38px);
  --h2-weight: 600;
  --h2-lh: 1.1;

  --h3-size: 22px;
  --h3-weight: 600;
  --h3-lh: 1.2;

  --body-lg-size: 19px;
  --body-size: 16px;
  --body-lh: 1.6;
  --body-weight: 400;

  --small-size: 14px;
  --caption-size: 12px;

  /* eyebrow / label — letterspaced uppercase grotesque */
  --label-size: 12px;
  --label-weight: 600;
  --label-ls: 0.22em;
}

/* =====================================================================
   SEMANTIC ELEMENT DEFAULTS  (opt-in: scope under .cshka or use vars)
   ===================================================================== */

.cshka, .cshka-scope {
  font-family: var(--font-ui);
  color: var(--fg-1);
  background: var(--ink-800);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.cshka h1, .cshka h2, .cshka h3, .cshka .display { font-family: var(--font-display); }

.display {
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: var(--display-ls);
}
.cshka h1, .h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: -0.01em; }
.cshka h2, .h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); }
.cshka h3, .h3 { font-family: var(--font-ui); font-size: var(--h3-size); font-weight: 700; line-height: var(--h3-lh); }
.body-lg { font-size: var(--body-lg-size); line-height: 1.55; color: var(--fg-2); }
.small { font-size: var(--small-size); }
.caption { font-size: var(--caption-size); color: var(--fg-3); }

.label, .eyebrow {
  font-family: var(--font-ui);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--fg-gold);
}

/* Foil text — gold sheen clip. Use on wordmark + key numerals. */
.foil {
  background: var(--gold-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tabular casino numerals (odds, balances, jackpots) */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }