/* ==========================================================================
   BRADOX PLAY — DESIGN SYSTEM TOKENS (obsidian glass + burnished gold)
   Fonte: design system "Bradox Play" (project/tokens.json, v2).
   Tema escuro é o padrão do produto; tema claro via [data-theme="light"].
   ========================================================================== */

:root {
  /* Layout */
  --topbar-h: 64px;
  --sidebar-w: 268px; /* DS: 244px; +24px para caber rótulo + contador */
  --sidebar-w-collapsed: 76px;
  --shell-gap: 12px;
  --content-max: 1400px;

  /* Tipografia */
  --font-display: "General Sans", "Satoshi", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* Raios */
  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Movimento */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --transition-fast: 0.2s var(--ease);
  --transition-normal: 0.3s var(--ease);

  /* Paleta base (independe de tema) */
  --obsidian: #050506;
  --graphite: #0b0d10;
  --zinc-1: #111318;
  --zinc-2: #161920;
  --zinc-3: #1c2028;
  --smoke: #272b33;
  --gold-hi: #e0bc72;
  --gold: #cda45c;
  --gold-2: #b98a3d;
  --gold-lo: #8e6a2d;
  --gold-pale: #f2dca8;
  --gold-ink: #1a1308;
  --amber: #ffb900;
  --paper: #f6f5f2;
}

/* ==========================================================================
   TEMA ESCURO (padrão)
   ========================================================================== */
:root, [data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--obsidian);
  --bg-2: var(--graphite);
  --surface: var(--zinc-1);
  --surface-raised: var(--zinc-2);
  --surface-3: var(--zinc-3);

  --line: rgba(255, 255, 255, 0.055);
  --line-strong: rgba(255, 255, 255, 0.10);
  --line-gold: rgba(205, 164, 92, 0.22);

  --ink: #f5f5f3;
  --ink-muted: #a1a1aa;
  --ink-subtle: #71717a;
  --ink-faint: #52525b;

  --accent: var(--gold);
  --accent-hover: var(--gold-hi);
  --accent-pressed: var(--gold-lo);
  --on-accent: var(--gold-ink);
  --on-accent-strong: #ffffff;
  --accent-text: var(--gold);
  --accent-soft: rgba(205, 164, 92, 0.10);
  --highlight: var(--amber);
  --on-highlight: #000000;
  --focus: var(--gold);

  --success: #a4f4cf;
  --success-subtle: rgba(0, 212, 146, 0.10);
  --success-line: rgba(0, 212, 146, 0.30);
  --danger: #ffa2a2;
  --danger-subtle: rgba(255, 100, 103, 0.10);
  --danger-line: rgba(255, 100, 103, 0.30);
  --warning: #fee685;
  --warning-subtle: rgba(255, 185, 0, 0.10);
  --warning-line: rgba(255, 185, 0, 0.30);
  --info: #c6d2ff;
  --info-subtle: rgba(198, 210, 255, 0.10);
  --info-line: rgba(198, 210, 255, 0.28);
  --on-status: var(--obsidian);

  --tone-indigo: #c6d2ff;
  --tone-orange: #ffd6a7;
  --tone-emerald: #a4f4cf;
  --tone-lime: #d8f999;
  --tone-rose: #ffccd3;
  --tone-amber: #fee685;

  --elev-1: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 36px -16px rgba(0, 0, 0, 0.7), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
  --elev-3: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -20px rgba(0, 0, 0, 0.7), 0 6px 16px -8px rgba(0, 0, 0, 0.5);
  --elev-float: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 80px -32px rgba(0, 0, 0, 0.85), 0 12px 32px -12px rgba(0, 0, 0, 0.5);
  --glow-gold: 0 6px 22px -6px rgba(232, 200, 134, 0.55), 0 10px 32px -10px rgba(205, 164, 92, 0.45);

  --glass: rgba(11, 13, 16, 0.78);
  --ambient: radial-gradient(60% 50% at 100% 0%, rgba(205, 164, 92, 0.07), transparent 70%),
             radial-gradient(50% 40% at 0% 0%, rgba(124, 108, 255, 0.05), transparent 70%);
  --scroll-thumb: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   TEMA CLARO
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg: var(--paper);
  --bg-2: #efede8;
  --surface: #ffffff;
  --surface-raised: #f1efea;
  --surface-3: #e7e4dd;

  --line: rgba(17, 19, 24, 0.08);
  --line-strong: rgba(17, 19, 24, 0.14);
  --line-gold: rgba(142, 106, 45, 0.30);

  --ink: #111318;
  --ink-muted: #52525b;
  --ink-subtle: #71717a;
  --ink-faint: #a1a1aa;

  --accent: var(--gold);
  --accent-hover: var(--gold-hi);
  --accent-pressed: var(--gold-lo);
  --on-accent: var(--gold-ink);
  --on-accent-strong: #ffffff;
  --accent-text: #8a5a12;
  --accent-soft: rgba(205, 164, 92, 0.16);
  --highlight: var(--amber);
  --on-highlight: #000000;
  --focus: #8a5a12;

  --success: #007a55;
  --success-subtle: rgba(0, 153, 102, 0.10);
  --success-line: rgba(0, 153, 102, 0.30);
  --danger: #c10007;
  --danger-subtle: rgba(231, 0, 11, 0.08);
  --danger-line: rgba(231, 0, 11, 0.28);
  --warning: #973c00;
  --warning-subtle: rgba(225, 113, 0, 0.10);
  --warning-line: rgba(225, 113, 0, 0.30);
  --info: #432dd7;
  --info-subtle: rgba(67, 45, 215, 0.08);
  --info-line: rgba(67, 45, 215, 0.25);
  --on-status: #ffffff;

  --tone-indigo: #432dd7;
  --tone-orange: #ca3500;
  --tone-emerald: #007a55;
  --tone-lime: #497d00;
  --tone-rose: #c70036;
  --tone-amber: #973c00;

  --elev-1: 0 1px 2px rgba(17, 19, 24, 0.08);
  --elev-2: 0 8px 24px -12px rgba(17, 19, 24, 0.18);
  --elev-3: 0 16px 32px -16px rgba(17, 19, 24, 0.22);
  --elev-float: 0 24px 48px -20px rgba(17, 19, 24, 0.28);
  --glow-gold: 0 6px 18px -6px rgba(185, 138, 61, 0.45);

  --glass: rgba(239, 237, 232, 0.82);
  --ambient: radial-gradient(60% 50% at 100% 0%, rgba(205, 164, 92, 0.10), transparent 70%),
             radial-gradient(50% 40% at 0% 0%, rgba(124, 108, 255, 0.05), transparent 70%);
  --scroll-thumb: rgba(17, 19, 24, 0.14);
}