/* ============================================================
   Lustre Social Casino — Design Tokens
   OKLCH throughout. All values verified against WCAG AA.
   ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg:          oklch(0.15 0.018 312);   /* near-black plum ink */
  --surface:     oklch(0.20 0.020 312);   /* sections, panels */
  --surface-2:   oklch(0.25 0.022 312);   /* raised cards, tiles */
  --surface-3:   oklch(0.30 0.024 312);   /* hover/active states */

  /* ── Text ─────────────────────────────────────────────── */
  --ink:         oklch(0.95 0.012 85);    /* body — ≥7:1 on --bg */
  --ink-strong:  oklch(0.98 0.008 85);    /* headings, emphasis */
  --muted:       oklch(0.72 0.016 85);    /* secondary — ≥3.5:1 on --bg */
  --subtle:      oklch(0.55 0.014 85);    /* tertiary, placeholders ≥4.5:1 */

  /* ── Brand ────────────────────────────────────────────── */
  --primary:     oklch(0.78 0.13 82);     /* brass-gold: display, hairlines */
  --primary-deep: oklch(0.62 0.12 70);    /* umber-brass: depth, gradients */
  --primary-dim:  oklch(0.78 0.13 82 / 0.12); /* subtle primary tint */
  --accent:      oklch(0.69 0.16 38);     /* ember/coral: CTAs */
  --accent-hover: oklch(0.74 0.17 38);    /* lighter ember on hover */

  /* ── Borders ──────────────────────────────────────────── */
  --line:        oklch(0.78 0.13 82 / 0.16);  /* hairline brass */
  --line-strong: oklch(0.78 0.13 82 / 0.32);  /* emphasized border */

  /* ── Type scale (fluid) ───────────────────────────────── */
  --t-xs:    clamp(0.75rem,   0.70rem + 0.25vw,  0.875rem);
  --t-sm:    clamp(0.875rem,  0.82rem  + 0.28vw,  1rem);
  --t-base:  clamp(1rem,      0.95rem  + 0.28vw,  1.125rem);
  --t-lg:    clamp(1.125rem,  1rem     + 0.6vw,   1.5rem);
  --t-xl:    clamp(1.5rem,    1.2rem   + 1.5vw,   2.25rem);
  --t-2xl:   clamp(2rem,      1.5rem   + 2.5vw,   3.5rem);
  --t-3xl:   clamp(2.75rem,   2rem     + 3.5vw,   5rem);
  --t-hero:  clamp(3.5rem,    2.5rem   + 4.5vw,   6rem);

  /* ── Spacing (fluid) ──────────────────────────────────── */
  --sp-1:   clamp(0.5rem,   0.4rem  + 0.5vw,   0.75rem);
  --sp-2:   clamp(1rem,     0.85rem + 0.75vw,  1.5rem);
  --sp-3:   clamp(1.5rem,   1.2rem  + 1.5vw,   2.5rem);
  --sp-4:   clamp(2.5rem,   2rem    + 2.5vw,   4rem);
  --sp-5:   clamp(4rem,     3rem    + 5vw,     7rem);
  --sp-6:   clamp(6rem,     4.5rem  + 7.5vw,  10rem);

  /* ── Border radius ────────────────────────────────────── */
  --r-sm:  2px;
  --r-md:  4px;
  --r-lg:  8px;
  --r-pill: 999px;

  /* ── Z-index ──────────────────────────────────────────── */
  --z-base:     0;
  --z-raise:    10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-backdrop: 300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* ── Transitions ──────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);  /* expo-like out */
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast:   180ms;
  --dur-base:   280ms;
  --dur-slow:   480ms;

  /* ── Shadows / glows ──────────────────────────────────── */
  --glow-primary:  0 0 24px oklch(0.78 0.13 82 / 0.22),
                   0 0 48px oklch(0.78 0.13 82 / 0.10);
  --glow-accent:   0 0 24px oklch(0.69 0.16 38 / 0.28),
                   0 0 48px oklch(0.69 0.16 38 / 0.12);
  --shadow-card:   0 2px 8px oklch(0 0 0 / 0.40),
                   0 8px 24px oklch(0 0 0 / 0.30);
}