/* ============================================================================
   Court.LIVE — Design System
   Global stylesheet: design tokens, type, light/dark modes, accent palettes,
   and base component classes. Everything in the product recolors from here.
   ----------------------------------------------------------------------------
   Fonts:  Bricolage Grotesque (display) · Manrope (body) · JetBrains Mono (mono)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── CORE PALETTE ────────────────────────────────────────────────────────── */
:root {
  /* Accent families — soft / base / deep / ink */
  --violet-soft:#EDE4FE; --violet-base:#7C3AED; --violet-deep:#5B21B6; --violet-ink:#2E1065;
  --forest-soft:#D1FAE5; --forest-base:#0E8A5F; --forest-deep:#065F46; --forest-ink:#022C22;
  --sunset-soft:#FFE4DC; --sunset-base:#F97257; --sunset-deep:#9A3412; --sunset-ink:#431407;
  --ocean-soft:#E0F2FE;  --ocean-base:#0EA5E9;  --ocean-deep:#075985;  --ocean-ink:#082F49;
  --ember-soft:#FFE4E6;  --ember-base:#E11D48;  --ember-deep:#9F1239;  --ember-ink:#4C0519;
  --gold-soft:#FBF1D6;   --gold-base:#C28A2B;   --gold-deep:#8A6212;   --gold-ink:#4A340A;

  /* Sport ball colours */
  --ball-padel:#F8E16C; --ball-tennis:#D4ED3C; --ball-pickleball:#FACC15;

  /* Status */
  --status-live:#EF4444; --status-win:#16A34A; --status-warning:#F59E0B;

  /* Subscription tiers — fixed identity, independent of the per-sport accent.
     Free = brand violet (all) · Premium = forest green · Pro = warm gold (top).
     Each paid tier also unlocks its signature accent theme (forest / gold). */
  --tier-free-soft:#EDE4FE;    --tier-free-base:#7C3AED;    --tier-free-deep:#5B21B6;    --tier-free-ink:#2E1065;
  --tier-premium-soft:#D1FAE5; --tier-premium-base:#0E8A5F; --tier-premium-deep:#065F46; --tier-premium-ink:#022C22;
  --tier-pro-soft:#FBF1D6;     --tier-pro-base:#C28A2B;     --tier-pro-deep:#8A6212;     --tier-pro-ink:#4A340A;
  /* metallic sheen for the Pro emblem */
  --tier-pro-sheen:linear-gradient(150deg,#E8C26A 0%,#C28A2B 46%,#9A6A18 100%); /* @kind color */

  /* ── Type families ── */
  --font-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:"Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ── Type scale (px) ── */
  --fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-15:15px;
  --fs-18:18px; --fs-22:22px; --fs-32:32px; --fs-42:42px; --fs-48:48px;

  /* ── Weights ── */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extra:800; /* @kind font */

  /* ── Radius ── */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:28px; --r-pill:9999px;

  /* ── Spacing ── */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:14px;
  --sp-6:18px; --sp-7:22px; --sp-8:28px; --sp-9:32px;

  /* ── Elevation ── */
  --shadow-card:0 1px 2px rgba(20,10,40,0.04), 0 8px 24px -8px rgba(20,10,40,0.10);
  --shadow-raised:0 2px 4px rgba(20,10,40,0.04), 0 24px 48px -16px rgba(60,30,140,0.20);
  --shadow-accent:0 8px 20px -6px rgba(124,58,237,0.45);
  --shadow-floating:0 4px 8px -2px rgba(20,10,40,0.10), 0 18px 40px -10px rgba(60,30,140,0.28);
}

/* ── SEMANTIC: LIGHT MODE (default) ──────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:#FBF9FE;
  --bg-elevated:#FFFFFF;
  --bg-sunken:#F3EEFA;
  --line:#E8E0F5;
  --line-strong:#D6CAEA;
  --text:#1A1326;
  --text-mute:#5C5470;
  --text-faint:#8B8499;
  --on-accent:#FFFFFF;
  --scrim:rgba(20,10,40,0.06);
}

/* ── SEMANTIC: DARK MODE ─────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:#0E0A1A;
  --bg-elevated:#181227;
  --bg-sunken:#0A0714;
  --line:#2A2440;
  --line-strong:#3A3352;
  --text:#F4F1FB;
  --text-mute:#A89FC4;
  --text-faint:#6E6688;
  --on-accent:#FFFFFF;
  --scrim:rgba(255,255,255,0.06);
  --shadow-card:0 1px 2px rgba(0,0,0,0.30), 0 12px 28px -10px rgba(0,0,0,0.55);
  --shadow-raised:0 2px 4px rgba(0,0,0,0.35), 0 28px 56px -16px rgba(0,0,0,0.65);
  --shadow-floating:0 4px 8px -2px rgba(0,0,0,0.40), 0 22px 48px -12px rgba(0,0,0,0.70);
}

/* ── ACCENT PALETTE (default: Violet) ────────────────────────────────────── */
:root,
[data-accent="violet"] { --accent:var(--violet-base); --accent-deep:var(--violet-deep); --accent-soft:var(--violet-soft); --accent-ink:var(--violet-ink); }
[data-accent="forest"]  { --accent:var(--forest-base); --accent-deep:var(--forest-deep); --accent-soft:var(--forest-soft); --accent-ink:var(--forest-ink); }
[data-accent="sunset"]  { --accent:var(--sunset-base); --accent-deep:var(--sunset-deep); --accent-soft:var(--sunset-soft); --accent-ink:var(--sunset-ink); }
[data-accent="ocean"]   { --accent:var(--ocean-base);  --accent-deep:var(--ocean-deep);  --accent-soft:var(--ocean-soft);  --accent-ink:var(--ocean-ink); }
[data-accent="ember"]   { --accent:var(--ember-base);  --accent-deep:var(--ember-deep);  --accent-soft:var(--ember-soft);  --accent-ink:var(--ember-ink); }
[data-accent="gold"]    { --accent:var(--gold-base);   --accent-deep:var(--gold-deep);   --accent-soft:var(--gold-soft);   --accent-ink:var(--gold-ink);   --on-accent:#2A1D05; }

/* In dark mode the soft tint reads as a translucent wash, not a pastel block */
[data-theme="dark"] {
  --accent-soft:color-mix(in srgb, var(--accent) 22%, transparent);
  --tier-free-soft:color-mix(in srgb, var(--tier-free-base) 24%, transparent);
  --tier-premium-soft:color-mix(in srgb, var(--tier-premium-base) 26%, transparent);
  --tier-pro-soft:color-mix(in srgb, var(--tier-pro-base) 26%, transparent);
  --tier-free-deep:#C4A9F2; --tier-premium-deep:#5FD3A3; --tier-pro-deep:#E6C779;
}
/* gold accent keeps dark ink text in both themes (white-on-gold is low contrast) */
[data-theme="dark"][data-accent="gold"] { --on-accent:#2A1D05; }

/* ============================================================================
   BASE / RESET
   ========================================================================== */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-15);
  font-weight:var(--fw-medium);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ============================================================================
   TYPOGRAPHY UTILITIES
   ========================================================================== */
.t-display-xl { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-48); line-height:1.1; letter-spacing:-0.02em; }
.t-display    { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-32); line-height:1.1; letter-spacing:-0.02em; }
.t-title      { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-22); line-height:1.1; }
.t-score      { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-42); line-height:1; font-variant-numeric:tabular-nums; }
.t-body       { font-family:var(--font-body); font-weight:var(--fw-medium); font-size:var(--fs-15); line-height:1.4; }
.t-label      { font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:var(--fs-13); line-height:1.4; }
.t-eyebrow    { font-family:var(--font-mono); font-weight:var(--fw-bold); font-size:var(--fs-10); line-height:1.4; letter-spacing:0.06em; text-transform:uppercase; }

/* ============================================================================
   BASE COMPONENT CLASSES
   These back the React components and are usable directly in HTML/markup.
   ========================================================================== */

/* ── Buttons ── */
.cl-btn {
  font-family:var(--font-body); cursor:pointer; border:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3);
  font-weight:var(--fw-bold); font-size:var(--fs-15); line-height:1;
  border-radius:var(--r-md); padding:14px 18px; transition:transform .12s ease, filter .15s ease, background .15s ease;
  white-space:nowrap; user-select:none;
}
.cl-btn:active { transform:translateY(1px) scale(0.99); }
.cl-btn--primary   { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-accent); }
.cl-btn--primary:hover { filter:brightness(1.06); }
.cl-btn--secondary { background:var(--bg-elevated); color:var(--text); border:1.5px solid var(--line); box-shadow:none; }
.cl-btn--secondary:hover { border-color:var(--line-strong); }
.cl-btn--ghost     { background:transparent; color:var(--accent); box-shadow:none; }
.cl-btn--ghost:hover { background:var(--accent-soft); }
.cl-btn--danger    { background:var(--feedback-danger); color:var(--on-fill-text); box-shadow:none; }
.cl-btn--sm { padding:9px 13px; font-size:var(--fs-13); border-radius:var(--r-sm); }
.cl-btn--lg { padding:17px 22px; font-size:var(--fs-18); border-radius:var(--r-lg); }
.cl-btn--block { width:100%; }
.cl-btn--icon { width:44px; height:44px; padding:0; background:var(--bg-elevated); color:var(--text); border:1px solid var(--line); box-shadow:none; }

/* ── Pills & badges ── */
.cl-pill {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:6px 12px; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:var(--fs-12); font-weight:var(--fw-semibold); line-height:1;
  background:var(--bg-sunken); color:var(--text-mute);
}
.cl-pill--accent { background:var(--accent-soft); color:var(--accent-deep); }
.cl-pill--outline { background:transparent; border:1.5px solid var(--line); color:var(--text-mute); }
.cl-pill--solid { background:var(--accent); color:var(--on-accent); }

.cl-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:9px; font-weight:var(--fw-extra); letter-spacing:0.06em;
  text-transform:uppercase; padding:3px 7px; border-radius:5px;
  background:var(--accent); color:var(--on-accent);
}
.cl-badge--win  { background:transparent; color:var(--status-win); padding-left:0; padding-right:0; }
.cl-badge--live { background:var(--status-live); color:var(--status-on-live); }
.cl-badge--live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--status-on-live); animation:cl-pulse 1.4s ease-in-out infinite; }
@keyframes cl-pulse { 0%,100%{opacity:1;} 50%{opacity:0.35;} }

/* ── Sport chip (padel / tennis / pickleball) ── */
.cl-sport {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:6px 11px 6px 8px; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:var(--fs-12); font-weight:var(--fw-semibold); line-height:1;
  background:var(--bg-sunken); color:var(--text);
}
.cl-sport .dot { width:9px; height:9px; border-radius:50%; flex:none; }
.cl-sport--off { color:var(--text-faint); }
.cl-sport--off .dot { background:var(--line-strong) !important; }

/* ── Avatar ── */
.cl-avatar {
  width:40px; height:40px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-14, 14px);
  background:var(--scrim); color:var(--text); overflow:hidden;
}
.cl-avatar--me { background:var(--accent); color:var(--on-accent); box-shadow:0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--accent); }
.cl-avatar--ghost { background:transparent; border:1.5px dashed var(--line-strong); color:var(--text-faint); }
.cl-avatar--sm { width:30px; height:30px; font-size:11px; }
.cl-avatar--lg { width:56px; height:56px; font-size:18px; }

/* ── Card ── */
.cl-card {
  background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:var(--sp-7);
}

/* ── Segmented control ── */
.cl-segmented { display:inline-flex; gap:var(--sp-2); padding:4px; border-radius:12px; background:var(--scrim); }
.cl-segmented .seg { padding:9px 16px; border-radius:9px; font-size:var(--fs-12); font-weight:var(--fw-bold); cursor:pointer; color:var(--text-mute); border:none; background:transparent; font-family:var(--font-body); }
.cl-segmented .seg.on { background:var(--accent); color:var(--on-accent); box-shadow:0 4px 10px -4px var(--accent); }

/* ── Toggle ── */
.cl-toggle { width:46px; height:28px; border-radius:var(--r-pill); background:var(--accent); position:relative; cursor:pointer; border:none; transition:background .15s; }
.cl-toggle.off { background:var(--line-strong); }
.cl-toggle .knob { position:absolute; top:3px; left:21px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:left .15s; }
.cl-toggle.off .knob { left:3px; }

/* ── Input ── */
.cl-input {
  width:100%; font-family:var(--font-body); font-size:var(--fs-15); font-weight:var(--fw-medium); color:var(--text);
  background:var(--bg-sunken); border:1.5px solid transparent; border-radius:var(--r-md); padding:12px 14px; outline:none;
}
.cl-input:focus { border-color:var(--accent); background:var(--bg-elevated); }
.cl-input::placeholder { color:var(--text-faint); }

/* ── FlipDigit (split-flap) keyframes ── */
@keyframes cl-flip-top { from { transform:rotateX(0deg); } to { transform:rotateX(-90deg); } }
@keyframes cl-flip-bottom { from { transform:rotateX(90deg); } to { transform:rotateX(0deg); } }