/* ============================================================
   GVS Group — tokens visuais
   Padrão do Grupo. Copie este arquivo para uma aplicação nova e
   consuma SEMPRE os aliases semânticos (--surface-*, --text-*,
   --action-*, --status-*), nunca a escala crua e nunca hex solto.

   Azul e navy do Grupo têm a MESMA matiz (223°) — a paleta é
   monocromática de propósito. A cor que carrega significado é a
   de status, não a de marca.
   ============================================================ */

:root{
  /* ---- Escala de marca (500 = acento oficial, 700 = navy oficial) ---- */
  --blue-50:#f1f5fe;  --blue-100:#dfe7fc; --blue-200:#bfcff8; --blue-300:#93adf0;
  --blue-400:#5c82e6; --blue-500:#2456d6; --blue-600:#1e49b8; --blue-700:#173d9e;
  --blue-800:#16337e; --blue-900:#132963;

  /* ---- Neutros frios (puxados para a matiz da marca) ---- */
  --neutral-0:#ffffff;  --neutral-25:#fbfcfd;  --neutral-50:#f7f9fb; --neutral-100:#f4f6f9;
  --neutral-200:#eef1f5; --neutral-300:#e2e6ec; --neutral-400:#c3cad6; --neutral-500:#98a2b3;
  --neutral-600:#667085; --neutral-700:#4a5568; --neutral-800:#2d3648; --neutral-900:#1c2333;

  /* ---- Status (valores em uso hoje no painel) ---- */
  --green-500:#12855c; --red-500:#dc2626; --orange-500:#c2410c;
  --amber-500:#b45309; --purple-500:#7c3aed;

  /* ---- Superfícies ---- */
  --surface-canvas:var(--neutral-100);
  --surface-card:var(--neutral-0);
  --surface-sunken:var(--neutral-100);
  --surface-inset:var(--neutral-200);
  --surface-inverse:var(--blue-700);
  --surface-brand-soft:color-mix(in srgb, var(--action-accent) 10%, transparent);
  --surface-overlay:rgba(23,61,158,.45);

  /* ---- Texto ---- */
  --text-strong:var(--neutral-900);
  --text-body:var(--neutral-900);
  --text-muted:var(--neutral-600);
  --text-subtle:var(--neutral-500);
  --text-inverse:#ffffff;
  --text-on-brand:#ffffff;   /* sobre navy/gradiente: SEMPRE branco fixo */
  --text-link:var(--action-accent);

  /* ---- Bordas ---- */
  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);

  /* ---- Ação ---- */
  --action-accent:var(--blue-500);
  --action-accent-hover:var(--blue-600);
  --action-primary:var(--blue-700);
  --action-ghost-hover:var(--neutral-100);
  --focus-ring:color-mix(in srgb, var(--action-accent) 32%, transparent);

  /* ---- Status semântico. O par "soft" nunca é hex novo: é color-mix
         sobre a própria cor, o que já funciona nos dois temas. ---- */
  --status-positive:var(--green-500);
  --status-negative:var(--red-500);
  --status-warning:var(--orange-500);
  --status-attention:var(--amber-500);
  --status-info:var(--action-accent);
  --status-neutral:var(--neutral-600);
  --status-soft:12%;   /* use: color-mix(in srgb, var(--status-x) var(--status-soft), transparent) */

  /* ---- Série de gráfico (nesta ordem) ---- */
  --chart-1:var(--blue-500);  --chart-2:var(--blue-700);   --chart-3:var(--blue-300);
  --chart-4:var(--green-500); --chart-5:var(--orange-500); --chart-6:var(--purple-500);
  --chart-7:var(--blue-100);  --chart-8:var(--neutral-600);

  /* ---- Marca ---- */
  --brand-gradient:linear-gradient(135deg, var(--blue-500), var(--blue-700));

  /* ---- Aliases que existem para a marca GV Energia poder diferir ----
     Na marca GVS apontam para o que já valia; o bloco [data-brand="gv-energia"]
     no fim do arquivo é quem os redefine. */
  --action-primary-hover:var(--action-accent-hover);
  --action-select:var(--action-primary);   /* botão de seleção / confirmação secundária */
  --brand-highlight:var(--action-accent);  /* filete, borda de destaque, ícone grande */
  --table-head-bg:var(--blue-700);
  --table-head-text:var(--text-on-brand);
  --surface-topbar:var(--blue-700);

  /* ---- Espaçamento (base 4) ---- */
  --space-1:4px;  --space-2:6px;  --space-3:8px;  --space-4:10px; --space-5:12px;
  --space-6:14px; --space-7:16px; --space-8:20px; --space-9:24px; --space-10:32px;

  /* ---- Raio ---- */
  --radius-sm:8px;    /* superfície interna */
  --radius-md:10px;   /* controle, input, linha de menu */
  --radius-lg:16px;   /* card — é o --radius histórico do painel */
  --radius-xl:20px;   /* diálogo */
  --radius-pill:999px;

  /* ---- Elevação: sempre tingida de navy, nunca preto puro ---- */
  --shadow-xs:0 1px 2px rgba(23,61,158,.05);
  --shadow-sm:0 1px 2px rgba(23,61,158,.05), 0 10px 28px -20px rgba(23,61,158,.18);
  --shadow-md:0 8px 18px -10px rgba(23,61,158,.28);
  --shadow-lg:0 16px 34px -18px rgba(23,61,158,.42);

  /* ---- Movimento ---- */
  --dur-control:140ms;  --dur-surface:220ms;  --dur-data:360ms;
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- Tipografia ---- */
  --font-core:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'SF Mono',ui-monospace,Consolas,monospace;

  /* Escala de corpo. Antes os tamanhos eram escolhidos caso a caso no CSS
     de cada componente e derivaram para 8.5px, 10.5px, 11.8px, 12.5px...
     Sete degraus cobrem tudo o que o painel usa; se um componente novo
     pede um oitavo, é sinal de que ele está querendo hierarquia que não
     existe. --fs-kpi é o único valor "grande", e só para número. */
  --fs-2xs:10px;   /* rótulo de KPI, eyebrow, meta                       */
  --fs-xs:11px;    /* legenda, dica, célula compacta, pílula             */
  --fs-sm:12px;    /* tabela, item de menu, botão pequeno                */
  --fs-md:13px;    /* corpo, input, select, botão                        */
  --fs-lg:15px;    /* título de card / painel                            */
  --fs-xl:18px;    /* título de modal                                    */
  --fs-2xl:22px;   /* h1 de página                                       */
  --fs-kpi:28px;   /* valor de KPI (mono, tabular-nums)                  */

  /* ---- Glow de palco ----
     Fundo de superfície que abriga um desenho grande (mapa, pirâmide,
     diagrama, tela de entrada): dá profundidade sem trocar a cor do card,
     e substitui o "céu escuro fixo" que não funcionava no tema claro. */
  --stage-glow:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(36,86,214,.09),transparent 70%);
}

/* ============================================================
   Tema escuro. Redefine SÓ os aliases — a escala de marca não muda.
   ============================================================ */
:root[data-theme="dark"]{
  --surface-canvas:#0d131b;
  --surface-card:#151d27;
  --surface-sunken:#1b2430;
  --surface-inset:#222c3a;
  --surface-inverse:#1b2b46;
  --surface-overlay:rgba(0,0,0,.55);

  --text-strong:#eef2f7;
  --text-body:#eef2f7;
  --text-muted:#8b98a8;
  --text-subtle:#6b7887;

  --border-subtle:#1e2733;
  --border-default:#26313e;
  --border-strong:#39465a;

  --action-accent:#3b7bf0;
  --action-accent-hover:#5c94f5;
  --action-primary:#3b7bf0;
  --action-ghost-hover:#1b2430;

  --green-500:#34d399; --red-500:#f87171; --orange-500:#fb923c;
  --amber-500:#fbbf24; --purple-500:#a78bfa;
  --status-neutral:#8b98a8;
  --status-soft:16%;   /* tint precisa de mais presença sobre fundo escuro */

  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.6);
  --shadow-md:0 10px 22px -12px rgba(0,0,0,.65);
  --shadow-lg:0 20px 40px -18px rgba(0,0,0,.7);

  --stage-glow:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(59,123,240,.16),transparent 70%);
}

/* ============================================================
   MARCA GV ENERGIA — exceção registrada (SKILL.md, A12)
   Ativação: <html data-brand="gv-energia">. Sem o atributo vale a marca GVS.
   Só redefine ALIASES (e a fonte); escala --blue-*/--neutral-* não muda.
   Quem consome aliases não precisa de código extra para trocar de marca.
   Contraste dos pares abaixo conferido (A5): texto >= 5,18:1, borda de
   controle 3,62:1; único par < 4,5:1 é o filete laranja sobre a barra do
   topo (3,08:1), que é elemento gráfico (exige 3:1), não texto.
   Valores do tema escuro vêm do SKILL.md com "~" (aproximados): confirmar
   contra base-clientes-app/app/globals.css, a referência oficial.
   ============================================================ */
:root[data-brand="gv-energia"]{
  --font-core:Montserrat,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  --surface-canvas:#f3f5fa;
  --surface-card:#ffffff;
  --surface-sunken:#f7f8fc;      /* zebra */
  --surface-inset:#e9ecf7;       /* item ativo do menu */
  --surface-topbar:#3d4c8f;
  --surface-inverse:#344284;
  --surface-overlay:rgba(52,66,132,.45);

  --text-strong:#1c2233;
  --text-body:#1c2233;
  --text-muted:#5a6382;
  --text-subtle:#5a6382;         /* sem degrau próprio documentado */

  --border-subtle:#e9ecf7;
  --border-default:#dde2ee;
  --border-strong:#7d86a2;       /* borda de controle (3,62:1 sobre o cartão) */

  --action-accent:#344284;       /* foco, link, hover de card: azul GV, nunca laranja */
  --action-accent-hover:#2c3970;
  --action-primary:#c2410c;      /* laranja fechado: #ff5f1f + branco = 3,0:1, reprova A5 */
  --action-primary-hover:#9a330a;
  --action-select:#344284;       /* decisão 02/10/2026: laranja só na ação principal da tela */
  --action-ghost-hover:#e9ecf7;
  --brand-highlight:#ff7a3d;     /* filete, borda, destaque — nunca texto pequeno */

  --table-head-bg:#e6eaf6;
  --table-head-text:#2c3970;     /* 9,1:1 */

  --green-500:#2f6b33; --red-500:#b91c1c; --orange-500:#b13b0a;
  --amber-500:#9a4507; --purple-500:#6d28d9;

  --shadow-xs:0 1px 2px rgba(52,66,132,.06);
  --shadow-sm:0 1px 2px rgba(52,66,132,.06), 0 10px 28px -20px rgba(52,66,132,.2);
  --shadow-md:0 8px 18px -10px rgba(52,66,132,.3);
  --shadow-lg:0 16px 34px -18px rgba(52,66,132,.44);

  --chart-1:#344284;             /* proposta do I&T: sem série documentada para a marca */
  --chart-2:#ff7a3d;
  --stage-glow:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(52,66,132,.09),transparent 70%);
}

:root[data-brand="gv-energia"][data-theme="dark"]{
  --surface-canvas:#0f1424;
  --surface-card:#171d30;
  --surface-sunken:#1c2339;
  --surface-inset:#2a3566;       /* item ativo do menu */
  --surface-topbar:#232d5c;      /* com filete --brand-highlight */
  --surface-inverse:#232d5c;
  --surface-overlay:rgba(0,0,0,.55);

  --text-strong:#eef1f8;
  --text-body:#eef1f8;
  --text-muted:#a3aac2;
  --text-subtle:#a3aac2;

  --border-subtle:#232b45;
  --border-default:#2c3556;
  --border-strong:#4a5580;

  --action-accent:#a5b1f0;       /* cor primária do tema escuro (8,09:1 sobre o cartão) */
  --action-accent-hover:#c3ccf6;
  --action-select:#2a3566;
  --action-ghost-hover:#1c2339;

  --table-head-bg:#26305a;
  --table-head-text:#e3e7fa;     /* 10,33:1 */

  --green-500:#34d399; --red-500:#f87171; --orange-500:#fb923c;
  --amber-500:#fbbf24; --purple-500:#a78bfa;
  --status-neutral:#a3aac2;

  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 10px 28px -18px rgba(0,0,0,.6);
  --shadow-md:0 10px 22px -12px rgba(0,0,0,.65);
  --shadow-lg:0 20px 40px -18px rgba(0,0,0,.7);

  --chart-1:#a5b1f0;
  --stage-glow:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(165,177,240,.14),transparent 70%);
}

/* Movimento é acessibilidade: some inteiro quando o sistema pede. */
@media (prefers-reduced-motion: reduce){
  :root{ --dur-control:0ms; --dur-surface:0ms; --dur-data:0ms; }
}