/*
  Tokens do Escolar Gestao2m.
  Cor da marca: #3387E9. Rampas derivadas pelo paleta.py.
  Nunca escrever hex direto em template: usar var(--...).
*/

:root {
  /* Marca (light e comum) */
  --accent: #3387E9;
  --accent-hover: #1872DC;
  --accent-escura: #135AAD;
  --accent-suave: #E7EFF8;
  --accent-soft: rgba(51, 135, 233, 0.12);
  --accent-sombra: rgba(51, 135, 233, 0.15);
  --accent-texto: #1872DC;
  --texto-sobre-accent: #FFFFFF;

  /* Superficie (light padrao) */
  --bg: #F5F7FA;
  --bg-elev: #FFFFFF;
  --surface: #FFFFFF;
  --border: #E3E7EC;
  --text: #1F2328;
  --text-dim: #5F6773;
  --texto-fraco: #8A929C;
  --texto-secundario: #5F6773;
  --texto-suave: #4A525C;

  --success: #16A34A;
  --danger: #E74C3C;
  --warning: #F1C40F;

  /* Tipografia */
  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titulo: "Sora", "Inter", sans-serif;

  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px;
  --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  --raio: 10px;
  --raio-sm: 10px;
  --raio-md: 12px;
  --raio-lg: 16px;
  --raio-full: 999px;

  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);
  --shadow-hover: 0 2px 6px rgba(16, 24, 40, 0.08), 0 4px 12px rgba(16, 24, 40, 0.10);
  --card-padding: 20px;
  --card-gap: 16px;
  --tabela-row-h: 48px;
  --kpi-num-fs: 28px;
  --kpi-num-fw: 700;
  --transicao: 180ms ease;

  --sidebar-w: 240px;
  --sidebar-w-colapsada: 72px;
  --topbar-h: 58px;

  /* Marca IA (Bloco 5 - Estudar com IA) */
  --ia: #7C3AED;
  --ia-hover: #6315E9;
  --ia-escura: #4F11BA;
  --ia-suave: #EDE7F8;
  --ia-soft: rgba(124, 58, 237, 0.12);
  --ia-sombra: rgba(124, 58, 237, 0.15);
  --ia-texto: #7C3AED;
  --texto-sobre-ia: #FFFFFF;

  --sidebar-bg: #1E293B;
  --sidebar-text-forte: #FFFFFF;
  --sidebar-text: #CBD5E1;
  --sidebar-item-hover: rgba(255, 255, 255, 0.06);
  --sidebar-item-active-bg: rgba(51, 135, 233, 0.18);
  --sidebar-item-active-text: #FFFFFF;
  --sidebar-grupo-label: #94A3B8;
  --sidebar-borda: rgba(255, 255, 255, 0.08);

  --fundo: var(--bg);
  --branco: #FFFFFF;
  --borda: var(--border);
}

/* Tema escuro */
[data-theme="dark"] {
  --accent: #3387E9;
  --accent-hover: #589DED;
  --accent-escura: #135AAD;
  --accent-suave: #1B2A3D;
  --accent-soft: rgba(51, 135, 233, 0.18);
  --accent-sombra: rgba(51, 135, 233, 0.25);
  --accent-texto: #7BB4F0;
  --texto-sobre-accent: #FFFFFF;

  --bg: #0D0F12;
  --bg-elev: #14171C;
  --surface: #1A1E24;
  --border: #262B33;
  --text: #E8EAED;
  --text-dim: #9AA0A8;
  --texto-fraco: #6B7078;
  --texto-secundario: #9AA0A8;
  --texto-suave: #B8BDC5;

  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.35);

  /* Marca IA no escuro (fundo suave escurecido, texto mais claro) */
  --ia: #7C3AED;
  --ia-hover: #955FF0;
  --ia-escura: #4F11BA;
  --ia-suave: #2A1B4A;
  --ia-soft: rgba(124, 58, 237, 0.18);
  --ia-sombra: rgba(124, 58, 237, 0.25);
  --ia-texto: #A78BFA;
  --texto-sobre-ia: #FFFFFF;

  --sidebar-bg: #0F172A;
  --sidebar-text-forte: #FFFFFF;
  --sidebar-text: #CBD5E1;
  --sidebar-item-hover: rgba(255, 255, 255, 0.08);
  --sidebar-item-active-bg: rgba(51, 135, 233, 0.25);
  --sidebar-item-active-text: #FFFFFF;
  --sidebar-grupo-label: #94A3B8;
  --sidebar-borda: rgba(255, 255, 255, 0.10);

  --fundo: var(--bg);
  --branco: var(--surface);
  --borda: var(--border);
}