/* =========================================================================
   Tokens do design system — Lumen (estrutura) + marca Plaorc (cores/fontes)
   Tema: <html data-theme="claro|escuro|sistema">. "sistema" segue o SO.
   Os blocos escuros são idênticos de propósito (CSS puro, sem pré-processador).
   ========================================================================= */

:root {
  color-scheme: light;

  /* Tipografia */
  --fonte-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Superfícies e texto */
  --bg: #f6f7f9;
  --surf: #ffffff;
  --surf-2: #f1f3f6;
  --txt: #121721;
  --mut: #6b7385;
  --bd: #e2e4e9;
  --bd-forte: #cfd3db;

  /* Marca Plaorc */
  --acc: #0b4d84;
  --acc-hover: #093e6b;
  --acc-txt: #ffffff;
  --acc-suave: color-mix(in srgb, var(--acc) 10%, transparent);
  --acc2: #9f141b;
  --acc2-suave: color-mix(in srgb, var(--acc2) 10%, transparent);
  --gradiente-marca: linear-gradient(135deg, #082c49 0%, #0b4d84 55%, #9f141b 100%);

  /* Semânticas */
  --sucesso: #1f9d63;
  --sucesso-bg: #e3f6ec;
  --sucesso-txt: #11764a;
  --atencao: #f59f0a;
  --atencao-bg: #fdf2e0;
  --atencao-txt: #9a5b06;
  --critico: #dc2828;
  --critico-bg: #fde8e8;
  --critico-txt: #b41c1c;
  --info: #308ce8;
  --info-bg: #e5f0fc;
  --info-txt: #1b5fa8;
  --oportunidade: #6d4ad8;
  --oportunidade-bg: #efeafd;
  --oportunidade-txt: #5434b8;

  /* Sidebar (azul-marinho Plaorc nos dois temas) */
  --side-bg: #082c49;
  --side-txt: #c7d4e1;
  --side-mut: #8aa1b8;
  --side-hover: rgba(255, 255, 255, 0.07);
  --side-ativo-bg: #ffffff;
  --side-ativo-txt: #082c49;
  --side-bd: rgba(255, 255, 255, 0.08);

  /* Forma */
  --r-sm: 8px;
  --r: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* Sombras */
  --sombra-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --sombra-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
  --sombra-hover: 0 12px 28px -12px color-mix(in srgb, var(--acc) 35%, transparent);
  --sombra-menu: 0 14px 36px rgba(16, 24, 40, 0.16);
  --sombra-glow: 0 30px 70px -20px color-mix(in srgb, var(--acc) 32%, transparent);
  --anel-foco: 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent);

  /* Movimento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-rapida: 0.15s;
  --t: 0.2s;
  --t-lenta: 0.35s;

  /* Layout */
  --side-largura: 248px;
  --side-recolhida: 72px;
  --header-altura: 60px;
  --overlay: rgba(8, 12, 20, 0.5);

  /* Gráficos (lidos pelo charts.js) */
  --grafico-1: #0b4d84;
  --grafico-2: #9f141b;
  --grafico-3: #1f9d63;
  --grafico-4: #f59f0a;
  --grafico-5: #6d4ad8;
  --grafico-6: #308ce8;
  --grafico-7: #0f9f8f;
  --grafico-8: #5ba6cf;
  --grafico-neutro: #737b8c; /* status declinado/parado */
  --grafico-grade: #e9ecf1;
}

/* ---------- Escuro explícito ---------- */
[data-theme="escuro"] {
  color-scheme: dark;
  --bg: #0f131a;
  --surf: #181c25;
  --surf-2: #1e2430;
  --txt: #e8eaee;
  --mut: #8f96a3;
  --bd: #252b37;
  --bd-forte: #343c4c;
  --acc: #2b8ad8;
  --acc-hover: #4a9fe3;
  --acc2: #d0252d;
  --sucesso: #34c486;
  --sucesso-bg: #0f2c20;
  --sucesso-txt: #5fd9a3;
  --atencao: #f2b03c;
  --atencao-bg: #2c2210;
  --atencao-txt: #f0c069;
  --critico: #f05252;
  --critico-bg: #351616;
  --critico-txt: #f78b8b;
  --info: #4ea0f0;
  --info-bg: #10233a;
  --info-txt: #86bdf5;
  --oportunidade: #9a7cf0;
  --oportunidade-bg: #221a3d;
  --oportunidade-txt: #b9a3f7;
  --side-bg: #061a2c;
  --side-ativo-bg: #2b8ad8;
  --side-ativo-txt: #ffffff;
  --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sombra-hover: 0 12px 30px -10px rgba(0, 0, 0, 0.55), 0 0 24px -8px color-mix(in srgb, var(--acc) 30%, transparent);
  --sombra-menu: 0 16px 40px rgba(0, 0, 0, 0.5);
  --overlay: rgba(0, 0, 0, 0.6);
  --grafico-1: #2b8ad8;
  --grafico-2: #e0474f;
  --grafico-3: #34c486;
  --grafico-4: #f2b03c;
  --grafico-5: #9a7cf0;
  --grafico-6: #4ea0f0;
  --grafico-7: #2dd4bf;
  --grafico-8: #7dd3fc;
  --grafico-neutro: #9aa1ae;
  --grafico-grade: #262c38;
}

/* ---------- Escuro pelo sistema operacional ---------- */
@media (prefers-color-scheme: dark) {
  [data-theme="sistema"] {
    color-scheme: dark;
    --bg: #0f131a;
    --surf: #181c25;
    --surf-2: #1e2430;
    --txt: #e8eaee;
    --mut: #8f96a3;
    --bd: #252b37;
    --bd-forte: #343c4c;
    --acc: #2b8ad8;
    --acc-hover: #4a9fe3;
    --acc2: #d0252d;
    --sucesso: #34c486;
    --sucesso-bg: #0f2c20;
    --sucesso-txt: #5fd9a3;
    --atencao: #f2b03c;
    --atencao-bg: #2c2210;
    --atencao-txt: #f0c069;
    --critico: #f05252;
    --critico-bg: #351616;
    --critico-txt: #f78b8b;
    --info: #4ea0f0;
    --info-bg: #10233a;
    --info-txt: #86bdf5;
    --oportunidade: #9a7cf0;
    --oportunidade-bg: #221a3d;
    --oportunidade-txt: #b9a3f7;
    --side-bg: #061a2c;
    --side-ativo-bg: #2b8ad8;
    --side-ativo-txt: #ffffff;
    --sombra-card: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-hover: 0 12px 30px -10px rgba(0, 0, 0, 0.55), 0 0 24px -8px color-mix(in srgb, var(--acc) 30%, transparent);
    --sombra-menu: 0 16px 40px rgba(0, 0, 0, 0.5);
    --overlay: rgba(0, 0, 0, 0.6);
    --grafico-1: #2b8ad8;
    --grafico-2: #e0474f;
    --grafico-3: #34c486;
    --grafico-4: #f2b03c;
    --grafico-5: #9a7cf0;
    --grafico-6: #4ea0f0;
    --grafico-7: #2dd4bf;
    --grafico-8: #7dd3fc;
    --grafico-neutro: #9aa1ae;
    --grafico-grade: #262c38;
  }
}