/* ============================================================
   K Club — Design Tokens (theme-swappable)
   Components reference these tokens ONLY (never literal values).
   Swap the look by changing [data-theme] on the .phone element.
   ============================================================ */

:root{
  /* Type families */
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-te:'Noto Sans Telugu',var(--font-ui);
  --font-hi:'Noto Sans Devanagari',var(--font-ui);

  /* Type scale */
  --fs-display:30px; --fs-headline:22px; --fs-title:17px;
  --fs-bodyl:16px; --fs-body:14px; --fs-label:13px; --fs-caption:11px;

  /* Spacing (8pt grid + 4pt half-step) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px;

  /* Radius */
  --r-pill:999px; --r-card:12px; --r-sheet:16px; --r-hero:24px;
}

/* -------- Default theme: Midnight Marquee -------- */
:root,
[data-theme="midnight-marquee"]{
  --color-bg:#0B0B0F; --color-surface:#15161C; --color-surface-2:#1E1F27; --color-line:#2A2B34;
  --color-text:#F4F4F6; --color-text-secondary:#A7A8B3; --color-text-muted:#6E6F7A;
  --color-accent:#E8B23A; --color-accent-pressed:#C8942A; --color-on-accent:#0B0B0F;
  --color-exclusive:#8B5CF6; --color-exclusive-soft:rgba(139,92,246,.16);
  --color-success:#4ADE80; --color-error:#EF4444; --color-info:#3B82F6;
  --scrim:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%);
  --shadow-1:0 6px 22px rgba(0,0,0,.5);
  --glow-accent:0 0 18px rgba(232,178,58,.35);
}

/* -------- Alternate: Mass Spotlight (dark, high-energy) -------- */
[data-theme="mass-spotlight"]{
  --color-bg:#0C0A0A; --color-surface:#181212; --color-surface-2:#221717; --color-line:#332323;
  --color-text:#F6F4F4; --color-text-secondary:#B7A8A8; --color-text-muted:#7A6E6E;
  --color-accent:#E8113D; --color-accent-pressed:#BE0E32; --color-on-accent:#FFFFFF;
  --color-exclusive:#FFB020; --color-exclusive-soft:rgba(255,176,32,.16);
  --color-success:#4ADE80; --color-error:#FF5A5A; --color-info:#3B82F6;
  --scrim:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%);
  --shadow-1:0 6px 22px rgba(0,0,0,.55);
  --glow-accent:0 0 18px rgba(232,17,61,.42);
}

/* -------- Alternate: Neon Nights (dark, cool, modern) -------- */
[data-theme="neon-nights"]{
  --color-bg:#0A0C10; --color-surface:#141923; --color-surface-2:#1C2331; --color-line:#2A3242;
  --color-text:#EAF1F8; --color-text-secondary:#9DB0C2; --color-text-muted:#677686;
  --color-accent:#22D3EE; --color-accent-pressed:#0EA5BE; --color-on-accent:#04121A;
  --color-exclusive:#A78BFA; --color-exclusive-soft:rgba(167,139,250,.16);
  --color-success:#34D399; --color-error:#FB7185; --color-info:#38BDF8;
  --scrim:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%);
  --shadow-1:0 6px 22px rgba(0,0,0,.55);
  --glow-accent:0 0 18px rgba(34,211,238,.42);
}