/* VotoAoVivo · Product Design System — tokens (primitivos → semânticos → séries).
   Copiado do Design System v3; só a família "accent" (amarelo da marca) foi renomeada para --accent-brand*,
   porque --accent já é a tinta neutra dos controles do painel. */
@import url('fonts/fonts.css');
:root{
  --green-950:#052e1b;--green-900:#064e2b;--green-800:#076535;--green-700:#08783e;--green-600:#009447;--green-500:#00a651;--green-400:#32bd73;--green-100:#dff5e8;--green-50:#f0faf4;
  --yellow-800:#7a5700;--yellow-700:#a87800;--yellow-600:#d6a500;--yellow-500:#ffcb05;--yellow-300:#ffe477;--yellow-100:#fff4c4;--yellow-50:#fffbeb;
  --neutral-1000:#080b0e;--neutral-950:#15191d;--neutral-900:#12171c;--neutral-850:#171d22;--neutral-800:#20262c;--neutral-700:#343c44;--neutral-600:#515b65;--neutral-500:#737d86;--neutral-400:#9aa2aa;--neutral-300:#c4cacf;--neutral-200:#e2e6e9;--neutral-100:#f0f2f3;--neutral-50:#f8f9f9;--white:#fff;

  /* spacing (base 4) */
  --sp-0-5:2px;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;
  /* radius */
  --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:999px;
  /* motion */
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;--ease:cubic-bezier(.2,0,0,1);
  /* type */
  --font:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* =========================================================
   2. SEMANTIC TOKENS — light (default)
   ========================================================= */
:root,[data-theme="light"]{
  --bg:#f4f5f3;--surface:var(--white);--surface-2:var(--neutral-50);--surface-sunken:var(--neutral-100);--surface-inverse:var(--neutral-950);
  --border:var(--neutral-200);--border-strong:var(--neutral-300);
  --text:var(--neutral-950);--text-muted:var(--neutral-600);--text-subtle:#5f6973;--text-inverse:var(--white);--text-disabled:var(--neutral-400);
  --brand:var(--green-700);--brand-hover:var(--green-800);--brand-text:var(--green-700);--brand-subtle:var(--green-50);
  --accent-brand:var(--yellow-500);--accent-brand-text:var(--yellow-800);--accent-brand-subtle:var(--yellow-50);
  --success:#16864b;--success-subtle:#e7f6ed;--warning:#c98500;--warning-text:#9a6700;--warning-subtle:#fff6e0;--danger:#c03030;--danger-subtle:#fdecec;--info:#1f5fe0;--info-subtle:#ebf1fe;
  --focus:#1769e0;
  --series-1:#2f6bdb;--series-2:#d2601a;--series-3:#7b4fd0;--series-4:#0f8a94;--series-5:#c2367f;--series-6:#8a6a2f;--series-7:#4f5d6b;--series-other:var(--neutral-500);
  --elev-1:0 1px 2px rgba(8,11,14,.04),0 3px 10px rgba(8,11,14,.035);
  --elev-2:0 6px 20px rgba(8,11,14,.08);
  --elev-3:0 18px 48px rgba(8,11,14,.16);
  --logo-light:block;--logo-dark:none;
  color-scheme:light;
}
/* dark (system) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--neutral-1000);--surface:#11171d;--surface-2:var(--neutral-850);--surface-sunken:#0d1217;--surface-inverse:var(--neutral-100);
    --border:#242b32;--border-strong:var(--neutral-700);
    --text:#f0f2f3;--text-muted:var(--neutral-400);--text-subtle:#8a939c;--text-inverse:var(--neutral-950);--text-disabled:var(--neutral-600);
    --brand:var(--green-600);--brand-hover:var(--green-500);--brand-text:var(--green-400);--brand-subtle:#0d2a1b;
    --accent-brand:var(--yellow-500);--accent-brand-text:var(--yellow-500);--accent-brand-subtle:#2a2208;
    --success:#4ccb7f;--success-subtle:#0f2a1b;--warning:#f5b83d;--warning-text:#f5b83d;--warning-subtle:#2b2109;--danger:#ff7070;--danger-subtle:#2e1414;--info:#6f9bff;--info-subtle:#121f3a;
    --focus:#6f9bff;
    --series-1:#6d9bff;--series-2:#f08a4b;--series-3:#a98bff;--series-4:#3cc2cb;--series-5:#f06aae;--series-6:#c9a465;--series-7:#9aa7b4;--series-other:var(--neutral-500);
    --elev-1:0 0 0 1px rgba(255,255,255,.02);--elev-2:0 8px 24px rgba(0,0,0,.45);--elev-3:0 24px 60px rgba(0,0,0,.6);
    --logo-light:none;--logo-dark:block;
    color-scheme:dark;
  }
}
/* dark (forçado) — mesmos valores */
:root[data-theme="dark"]{
  --bg:var(--neutral-1000);--surface:#11171d;--surface-2:var(--neutral-850);--surface-sunken:#0d1217;--surface-inverse:var(--neutral-100);
  --border:#242b32;--border-strong:var(--neutral-700);
  --text:#f0f2f3;--text-muted:var(--neutral-400);--text-subtle:#8a939c;--text-inverse:var(--neutral-950);--text-disabled:var(--neutral-600);
  --brand:var(--green-600);--brand-hover:var(--green-500);--brand-text:var(--green-400);--brand-subtle:#0d2a1b;
  --accent-brand:var(--yellow-500);--accent-brand-text:var(--yellow-500);--accent-brand-subtle:#2a2208;
  --success:#4ccb7f;--success-subtle:#0f2a1b;--warning:#f5b83d;--warning-text:#f5b83d;--warning-subtle:#2b2109;--danger:#ff7070;--danger-subtle:#2e1414;--info:#6f9bff;--info-subtle:#121f3a;
  --focus:#6f9bff;
  --series-1:#6d9bff;--series-2:#f08a4b;--series-3:#a98bff;--series-4:#3cc2cb;--series-5:#f06aae;--series-6:#c9a465;--series-7:#9aa7b4;--series-other:var(--neutral-500);
  --elev-1:0 0 0 1px rgba(255,255,255,.02);--elev-2:0 8px 24px rgba(0,0,0,.45);--elev-3:0 24px 60px rgba(0,0,0,.6);
  --logo-light:none;--logo-dark:block;
  color-scheme:dark;
}


/* =========================================================
   Compatibilidade: nomes antigos do painel apontando para os tokens do Design System
   ========================================================= */
:root{
  --grid:var(--surface-sunken);
  --text-2:var(--text-muted);--text-3:var(--text-subtle);
  --hd1:var(--neutral-950);--hd2:var(--neutral-950);
  --accent:var(--surface-inverse);--on-accent:var(--text-inverse);
  --bar:var(--series-1);--bar-dim:color-mix(in srgb,var(--series-1) 32%,var(--surface));
  --m0:color-mix(in srgb,var(--series-1) 18%,var(--surface));--m1:var(--series-1);
  --m-empty:var(--border);--m-off:var(--neutral-100);
  --pc-pt:var(--series-2);--pc1:var(--series-1);--pc2:var(--series-2);--pc3:var(--series-3);--pc4:var(--series-4);
  --good:var(--success);--good-bg:var(--success-subtle);--warn:var(--warning-text);--warn-bg:var(--warning-subtle);--err:var(--danger);
  --sombra:var(--elev-1);--raio:var(--r-lg);
}
:root[data-theme="dark"],:root:not([data-theme="light"]){}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--m-off:var(--neutral-850)}}
:root[data-theme="dark"]{--m-off:var(--neutral-850)}