/* =========================================================================
   Order Breakers MC — tokens de design
   Paleta concisa: preto de asfalto, osso e cobre (tirado do brasão).
   ========================================================================= */

:root {
  /* Cores de marca — sobrescritas pelo painel em tempo de renderização. */
  --accent: #c87137;
  --accent-alt: #e4b363;
  --accent-ink: #0a0705;

  /* Tipografia */
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-cond: 'BarlowCondensed', 'Oswald', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.9rem + 0.22vw, 1.05rem);
  --step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --step-4: clamp(2.6rem, 1.8rem + 4vw, 5rem);
  --step-5: clamp(3.4rem, 2rem + 7.5vw, 9rem);

  /* Ritmo */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --container: 1240px;
  --container-narrow: 760px;

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;

  --header-h: 76px;
  --player-h: 78px;
  --z-bg: 0;
  --z-content: 1;
  --z-header: 60;
  --z-player: 70;
  --z-hud: 80;
  --z-overlay: 90;
}

/* ------------------------------------------------------------ tema escuro */
[data-theme='dark'] {
  color-scheme: dark;

  --bg: #060607;
  --bg-deep: #030304;
  --bg-elev: #0c0c0f;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-solid: #111114;

  --line: rgba(237, 231, 222, 0.1);
  --line-strong: rgba(237, 231, 222, 0.22);

  --text: #ece6dd;
  --text-dim: #9b958c;
  --text-faint: #656058;

  --glass: rgba(10, 10, 12, 0.55);
  --glass-strong: rgba(8, 8, 10, 0.82);
  --glass-border: rgba(237, 231, 222, 0.12);

  --shadow-s: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-m: 0 18px 46px rgba(0, 0, 0, 0.6);
  --shadow-l: 0 40px 90px rgba(0, 0, 0, 0.72);
  --glow: 0 0 40px rgba(200, 113, 55, 0.28);

  --bg-line-alpha: 0.55;
  --grain-opacity: 0.05;
}

/* ------------------------------------------------------------- tema claro */
[data-theme='light'] {
  color-scheme: light;

  --bg: #efece5;
  --bg-deep: #e4e0d7;
  --bg-elev: #f8f6f1;
  --surface: rgba(18, 16, 14, 0.04);
  --surface-2: rgba(18, 16, 14, 0.08);
  --surface-solid: #ffffff;

  --line: rgba(18, 16, 14, 0.12);
  --line-strong: rgba(18, 16, 14, 0.26);

  --text: #16130f;
  --text-dim: #56504a;
  --text-faint: #857e75;

  --glass: rgba(248, 246, 241, 0.72);
  --glass-strong: rgba(252, 250, 246, 0.9);
  --glass-border: rgba(18, 16, 14, 0.12);

  --shadow-s: 0 2px 8px rgba(40, 30, 20, 0.1);
  --shadow-m: 0 18px 40px rgba(40, 30, 20, 0.14);
  --shadow-l: 0 36px 80px rgba(40, 30, 20, 0.18);
  --glow: 0 0 36px rgba(200, 113, 55, 0.22);

  --bg-line-alpha: 0.35;
  --grain-opacity: 0.03;
}