/* ============================================================
   TRAFEGOBI · DESIGN TOKENS
   Fonte única de verdade para todo o sistema visual.
   ============================================================ */

:root {
  /* ── Cores base (dark "control room") ─────────────────────── */
  --bg:           #07070d;
  --bg-elev:      #0c0c16;
  --surface:      #12121e;
  --surface-2:    #191928;
  --surface-3:    #212134;
  --surface-hi:   #2a2a40;

  --line:         rgba(255, 255, 255, 0.07);
  --line-2:       rgba(255, 255, 255, 0.12);
  --line-strong:  rgba(255, 255, 255, 0.18);

  /* Tints de hover/seleção — temáticos (no claro viram escuros). */
  --hover:        rgba(255, 255, 255, 0.04);
  --hover-2:      rgba(255, 255, 255, 0.07);
  /* Fundo "vidro" translúcido da topbar (leva blur atrás) — temático. */
  --glass-bg:     rgba(7, 7, 13, 0.8);
  /* Aliases usados em app-shell.css sem definição (evita cair no fallback hex escuro). */
  --border:       var(--line-2);
  --text-1:       var(--text);
  --accent:       var(--brand);

  /* ── Marca ────────────────────────────────────────────────── */
  --brand:        #00e5a0;   /* verde — sinal, positivo, "ao vivo" */
  --brand-2:      #00c489;
  --brand-ink:    #04130d;   /* texto sobre verde */
  --brand-glow:   rgba(0, 229, 160, 0.35);

  --violet:       #7c6cff;   /* roxo — secundário */
  --violet-2:     #9486ff;
  --violet-glow:  rgba(124, 108, 255, 0.30);

  /* ── Semânticas ───────────────────────────────────────────── */
  --amber:        #ffc960;
  --rose:         #ff5d6c;
  --sky:          #4cc4ff;
  --success:      var(--brand);
  --danger:       var(--rose);
  --warning:      var(--amber);
  --info:         var(--sky);

  /* Positivo/negativo de DADO (delta, resumo, heatmap). Fonte ÚNICA — antes o
     código pintava com Tailwind solto (#10b981/#f43f5e) em vários lugares, criando
     "dois verdes e dois vermelhos". `--emerald` era usado mas não existia (caía no
     fallback hex). *-rgb servem para rgba() com alpha (heatmap). */
  --pos:          var(--brand);
  --pos-rgb:      0, 229, 160;
  --neg:          var(--rose);
  --neg-rgb:      255, 93, 108;
  --emerald:      var(--pos);   /* compat: unifica usos antigos de var(--emerald) */

  /* ── Texto ────────────────────────────────────────────────── */
  --text:         #f4f4fb;
  --text-2:       #a8a8c6;
  /* --text-3/--text-faint clareados p/ passar contraste AA no tema escuro (padrão):
     --text-3 carrega quase todo rótulo secundário (era 3.68:1 → agora ~4.6:1);
     --text-faint são os eixos dos gráficos (era 2.0:1, quase invisível → ~3.5:1). */
  --text-3:       #8b8bad;
  --text-faint:   #6f6f8d;

  /* ── Tipografia ───────────────────────────────────────────── */
  --font-display: 'Syne', 'Trebuchet MS', system-ui, sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;  /* 15 */
  --fs-md:   1rem;       /* 16 */
  --fs-lg:   1.125rem;   /* 18 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */
  --fs-3xl:  2.25rem;    /* 36 */
  --fs-4xl:  clamp(2.25rem, 5vw, 3.5rem);
  --fs-5xl:  clamp(2.75rem, 7vw, 4.75rem);

  --lh-tight:  1.12;
  --lh-snug:   1.3;
  --lh-normal: 1.6;

  /* ── Espaçamento (escala 4px) ─────────────────────────────── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* ── Raios ────────────────────────────────────────────────── */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ── Sombras ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 24px 70px rgba(0, 0, 0, 0.55);
  --shadow-brand: 0 12px 40px rgba(0, 229, 160, 0.18);
  --shadow-violet: 0 12px 40px rgba(124, 108, 255, 0.18);

  /* ── Movimento ────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  0.15s;
  --t-base:  0.25s;
  --t-slow:  0.45s;

  /* ── Layout ───────────────────────────────────────────────── */
  --container:    1180px;
  --container-sm: 720px;
  --container-md: 920px;
  --nav-h:        68px;
  --sidebar-w:    256px;
  --sidebar-collapsed: 76px;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:    1;
  --z-sticky:  100;
  --z-nav:     200;
  --z-overlay: 300;
  --z-drawer:  400;
  --z-modal:   500;
  --z-toast:   600;
}

/* ============================================================
   TEMA CLARO — opt-in via [data-theme="light"] no <html>.
   O app nasce escuro (identidade "control room"); o claro troca só a
   PALETA (superfícies, linhas, texto, sombras, hover). A marca (verde/roxo/
   semânticas) permanece pra manter a identidade. Aplicado pelo toggle da topbar.
   ============================================================ */
:root[data-theme="light"] {
  --bg:           #f5f6fb;
  --bg-elev:      #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f1f2f8;
  --surface-3:    #e7e9f2;
  --surface-hi:   #dde1ec;

  --line:         rgba(17, 20, 40, 0.10);
  --line-2:       rgba(17, 20, 40, 0.15);
  --line-strong:  rgba(17, 20, 40, 0.24);

  --hover:        rgba(17, 20, 40, 0.05);
  --hover-2:      rgba(17, 20, 40, 0.08);
  --glass-bg:     rgba(245, 246, 251, 0.82);

  --brand-glow:   rgba(0, 196, 137, 0.26);
  --violet-glow:  rgba(124, 108, 255, 0.20);

  --text:         #10131f;
  --text-2:       #454a60;
  --text-3:       #63687f;
  --text-faint:   #767c93;   /* escurecido: eixos/faint legíveis no claro (era 2.4:1) */

  --shadow-sm:    0 1px 3px rgba(17, 20, 40, 0.08);
  --shadow-md:    0 8px 30px rgba(17, 20, 40, 0.10);
  --shadow-lg:    0 24px 70px rgba(17, 20, 40, 0.14);
  --shadow-brand: 0 12px 40px rgba(0, 229, 160, 0.20);
  --shadow-violet: 0 12px 40px rgba(124, 108, 255, 0.16);
}