/*
 * Tokens de design. Tema claro em :root; escuro em [data-theme="dark"].
 * O atributo data-theme fica no <html> e é definido pelo ThemeProvider
 * (ou pelo script inline do index.html, antes de a página aparecer).
 */
:root {
  /* Superfícies */
  --bg: #f7f7fb;
  --surface: #ffffff;
  --surface-2: #f1f0f7;
  --surface-3: #e9e7f3;
  --border: #e6e4ef;
  --border-strong: #d4d1e2;

  /* Texto */
  --text: #17161f;
  --text-2: #5d5a73;
  --text-3: #8b88a0;

  /* Marca */
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-soft: #f1eafe;
  --primary-soft-2: #e4d7fd;
  --on-primary: #ffffff;

  /* Estados */
  --success: #15803d;
  --success-soft: #e6f6ec;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --warning: #b45309;
  --warning-soft: #fef4e2;
  --star: #f59e0b;

  /* Presença */
  --status-online: #16a34a;
  --status-busy: #dc2626;
  --status-away: #f59e0b;
  --status-offline: #9b98ad;

  /* Medalhas do pódio (sobre o palco escuro, iguais nos dois temas) */
  --medal-1: #fbbf24;
  --medal-2: #e2e8f0;
  --medal-3: #f0a46b;

  /* Palco da roleta (escuro nos dois temas) */
  --stage-1: #241a4d;
  --stage-2: #3b1f78;

  /* Cores por tipo de clube */
  --type-video_game: #7c3aed;
  --type-book: #0d9488;
  --type-comic: #e11d48;
  --type-manga: #ea580c;
  --type-board_game: #ca8a04;

  /* Fatias da roleta */
  --slice-0: #7c3aed;
  --slice-1: #db2777;
  --slice-2: #f59e0b;
  --slice-3: #0d9488;
  --slice-4: #2563eb;
  --slice-5: #ea580c;

  --shadow-sm: 0 1px 2px rgb(23 22 31 / 6%);
  --shadow-md: 0 1px 2px rgb(23 22 31 / 4%), 0 6px 16px -4px rgb(52 31 120 / 10%);
  --shadow-lg: 0 2px 6px rgb(23 22 31 / 6%), 0 24px 48px -12px rgb(52 31 120 / 28%);
  --ring: 0 0 0 3px rgb(124 58 237 / 28%);

  --font: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', var(--font);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  color-scheme: light;
}

[data-theme='dark'] {
  --bg: #0f0f17;
  --surface: #1a1a26;
  --surface-2: #222232;
  --surface-3: #2b2b3e;
  --border: #2e2d40;
  --border-strong: #3d3c55;

  --text: #ececf4;
  --text-2: #a3a1b8;
  --text-3: #7d7b93;

  --primary: #a78bfa;
  --primary-hover: #c4b5fd;
  --primary-soft: #2a2244;
  --primary-soft-2: #362c5a;
  --on-primary: #1a1033;

  --success: #4ade80;
  --success-soft: #16301f;
  --danger: #f87171;
  --danger-soft: #3a1c1f;
  --warning: #fbbf24;
  --warning-soft: #33280f;
  --star: #fbbf24;

  --status-online: #22c55e;
  --status-busy: #ef4444;
  --status-away: #fbbf24;
  --status-offline: #6f6c85;

  --stage-1: #15102e;
  --stage-2: #2a1659;

  --type-video_game: #a78bfa;
  --type-book: #2dd4bf;
  --type-comic: #fb7185;
  --type-manga: #fb923c;
  --type-board_game: #facc15;

  --shadow-sm: none;
  --shadow-md: 0 0 0 1px rgb(255 255 255 / 3%), 0 8px 24px -8px rgb(0 0 0 / 60%);
  --shadow-lg: 0 0 0 1px rgb(255 255 255 / 4%), 0 24px 56px -12px rgb(0 0 0 / 70%);
  --ring: 0 0 0 3px rgb(167 139 250 / 35%);

  color-scheme: dark;
}