/* ============================================================
   A&7 · Dashboard Financeiro — Design Tokens & Temas (claro/escuro)
   Paleta "Finanças & Confiança": teal/esmeralda (dinheiro, crescimento)
   + azul (confiança, tecnologia) + dourado (resultado, premium).
   Mobile-first · CSS puro · sem frameworks
   ============================================================ */

:root {
  /* ---- Marca (fixos nos dois temas) ---- */
  --teal: #14c8a4;
  --teal-2: #3de2c0;
  --blue: #3b82f6;
  --gold: #f6b73c;
  --violet: #6b32ff;      /* mantém um toque A&7 no canto */
  --green: #2bd08a;       /* positivo / dinheiro */
  --amber: #ffb02e;       /* alerta / atenção */
  --red: #ff5d6c;         /* negativo / risco */

  /* ---- Forma / métricas ---- */
  --radius: 26px;
  --radius-sm: 18px;
  --radius-xs: 12px;
  --max: 1180px;
  --header-h: 68px;
  --gap: 24px;

  /* ---- Tipografia ---- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num: "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  /* ---- Sombras ---- */
  --shadow: 0 24px 80px rgba(6, 22, 17, .16);
  --shadow-sm: 0 10px 30px rgba(6, 22, 17, .12);

  /* ---- Gradiente de marca ---- */
  --grad-brand: linear-gradient(105deg, var(--teal) 0%, var(--blue) 55%, var(--gold) 120%);
  --grad-brand-soft: linear-gradient(135deg, rgba(20,200,164,.18), rgba(59,130,246,.18));
}

/* ============ TEMA CLARO (padrão) ============ */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7f5;
  --surface: #ffffff;
  --surface-2: #eef3f0;
  --surface-3: #e3ebe6;
  --ink: #0c1411;
  --muted: #5e6f67;
  --line: rgba(12, 20, 17, .11);
  --line-strong: rgba(12, 20, 17, .2);
  --header-bg: rgba(255, 255, 255, .86);
  --header-ink: #0c1411;
  --hero-bg-1: #f9fcfb;
  --hero-bg-2: #f0f6f3;
  --grid-line: rgba(12, 20, 17, .05);
  --tool-bg: rgba(255, 255, 255, .94);
  --tool-border: rgba(12, 20, 17, .08);
  --badge-ok-bg: rgba(43, 208, 138, .16);
  --badge-ok-ink: #0b8f5c;
  --badge-warn-bg: rgba(255, 176, 46, .2);
  --badge-warn-ink: #a86600;
  --badge-danger-bg: rgba(255, 93, 108, .14);
  --badge-danger-ink: #d6334a;
  --badge-info-bg: rgba(59, 130, 246, .14);
  --badge-info-ink: #2563eb;
  --glow: rgba(20, 200, 164, .28);
  --code-bg: #0d1a16;
  --code-ink: #e7f0ec;
  --kpi-bg: #ffffff;
}

/* ============ TEMA ESCURO ============ */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070d0b;
  --surface: #0e1512;
  --surface-2: #16201c;
  --surface-3: #1f2c26;
  --ink: #edf4f1;
  --muted: #93a89f;
  --line: rgba(237, 244, 241, .11);
  --line-strong: rgba(237, 244, 241, .22);
  --header-bg: rgba(7, 13, 11, .9);
  --header-ink: #ffffff;
  --hero-bg-1: #09100e;
  --hero-bg-2: #0c1512;
  --grid-line: rgba(237, 244, 241, .05);
  --tool-bg: rgba(14, 21, 18, .94);
  --tool-border: rgba(237, 244, 241, .09);
  --badge-ok-bg: rgba(43, 208, 138, .16);
  --badge-ok-ink: #4fe0ab;
  --badge-warn-bg: rgba(255, 176, 46, .16);
  --badge-warn-ink: #ffc25e;
  --badge-danger-bg: rgba(255, 93, 108, .16);
  --badge-danger-ink: #ff7d8a;
  --badge-info-bg: rgba(59, 130, 246, .18);
  --badge-info-ink: #7fb0ff;
  --glow: rgba(61, 226, 192, .34);
  --code-bg: #0a1410;
  --code-ink: #dce8e2;
  --kpi-bg: #0e1512;
}