/* ==========================================================================
   Design tokens — Alianzo Analytics (compartilhado: hub, Produtividade 360 e próximas páginas)
   Página estática: <link rel="stylesheet" href="/public/ds/tokens.css">. App Vite: @import deste arquivo.
   Três camadas:
     1. primitivos  (--p-*)  valores crus da marca; nunca usados direto em componente
     2. semânticos  (--c-*, --space-*, --radius-*, --font-*, --shadow-*)  o que a UI consome
     3. componentes (--kpi-*, --panel-*, ...)  só quando um componente precisa de exceção
   Tema: o cabeçalho do BI grava html[data-tema="dark"|"light"]. Os gráficos (ECharts) leem
   estes MESMOS tokens em runtime (theme.js) — cor definida só aqui.
   Paletas validadas com validate_palette.js (skill dataviz); ver comentários em theme.js.
   ========================================================================== */

:root {
  /* ---- 1. primitivos ---- */
  --p-navy-900: #001830; --p-navy-800: #002349; --p-navy-700: #0a3a73;
  --p-cyan-500: #00B0F0; --p-cyan-600: #0e9fd9; --p-cyan-200: #7fd4ff;
  --p-gray-0: #ffffff; --p-gray-25: #fcfcfb; --p-gray-50: #f4f7fb; --p-gray-100: #edf1f6; --p-gray-200: #e3e9f2;
  --p-gray-400: #a3adb8; --p-gray-600: #5b6b80; --p-gray-900: #0d1b2a;
  --p-ink-dark-50: #ddeaf8; --p-ink-dark-300: #9fb3c8; --p-surface-dark-900: #080f1a; --p-surface-dark-800: #0d1926;
  --p-surface-dark-700: #0f1e30; --p-surface-dark-600: #132035; --p-line-dark: #1e3550; --p-grid-dark: #17304a;

  /* ---- 2. semânticos: cor ---- */
  --c-bg: var(--p-gray-50);
  --c-surface: var(--p-gray-0);
  --c-surface-raised: var(--p-gray-0);
  --c-surface-sunken: #f8fafc;
  --c-surface-glass: rgba(255, 255, 255, .86);
  --c-ink: var(--p-gray-900);
  --c-ink-muted: var(--p-gray-600);
  --c-ink-subtle: #7b8a9c;
  --c-ink-inverse: #ffffff;
  --c-line: var(--p-gray-200);
  --c-line-strong: #cfd8e4;
  --c-grid: var(--p-gray-100);
  --c-brand: var(--p-cyan-500);
  --c-brand-strong: var(--p-navy-800);
  --c-brand-soft: rgba(0, 176, 240, .12);
  --c-focus: #0a84c6;
  --c-hero-overlay: linear-gradient(135deg, rgba(255,255,255,.90) 0%, rgba(238,246,252,.94) 100%);

  /* status (reservado: sempre com ícone + rótulo, nunca como cor de série) */
  --c-ok: #008300;       --c-ok-soft: rgba(0, 131, 0, .10);
  --c-warn: #b07800;     --c-warn-soft: rgba(237, 161, 0, .14);
  --c-danger: #d63a39;   --c-danger-soft: rgba(227, 73, 72, .11);
  --c-info: #2a78d6;     --c-info-soft: rgba(42, 120, 214, .11);

  /* dados: divergente (produtivo / neutro / distração) + categórico de 8 posições em ordem fixa */
  --dv-prod: #2a78d6; --dv-neutro: #a3adb8; --dv-distr: #eb6834; --dv-alerta: #e34948;
  --cat-1: #00B0F0; --cat-2: #eb6834; --cat-3: #1baf7a; --cat-4: #7b4fb5;
  --cat-5: #e87ba4; --cat-6: #a35a1f; --cat-7: #2a78d6; --cat-8: #b0447f;
  /* sequencial de 1 matiz (claro -> escuro) */
  --seq-1: #eaf2fb; --seq-2: #c9ddf5; --seq-3: #9cc1ec; --seq-4: #6aa0e0; --seq-5: #3f80d4; --seq-6: #2464b3; --seq-7: #17467f;

  /* ---- 2. semânticos: tipografia (escala modular 1.2) ---- */
  --font-sans: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-num: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 23px; --fs-3xl: 28px; --fs-4xl: 34px;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --fw-black: 900;
  --lh-tight: 1.15; --lh-normal: 1.45;

  /* ---- 2. semânticos: espaço (grade de 4px), raio, elevação, movimento ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(13, 27, 42, .06), 0 1px 3px rgba(13, 27, 42, .05);
  --shadow-2: 0 4px 16px rgba(13, 27, 42, .08);
  --shadow-3: 0 16px 48px rgba(0, 12, 30, .22);
  /* movimento: curvas e durações padronizadas (Material 3 / Apple HIG como referência) */
  --ease: cubic-bezier(.2, .7, .2, 1);              /* padrão (saída suave) */
  --ease-emph: cubic-bezier(.05, .7, .1, 1);         /* entrada enfática */
  --ease-exit: cubic-bezier(.3, 0, .8, .15);         /* saída acelerada */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);    /* leve overshoot (toggles, chips) */
  --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 380ms; --dur-count: 700ms;
  --stagger: 45ms;                                    /* atraso entre cards irmãos na entrada */
  --hit-min: 32px;            /* alvo mínimo de clique */
  --content-max: 2560px;        /* dashboards: praticamente a tela toda */
  --content-max-hub: 1440px;    /* páginas de navegação (cards) */
  --gutter: clamp(16px, 2vw, 40px); /* respiro lateral proporcional à tela */

  /* ---- 3. componentes ---- */
  --panel-pad: var(--space-5);
  --kpi-value: var(--fs-3xl);
  --z-sticky: 90; --z-drawer: 9400; --z-pop: 9450;
}

html[data-tema="dark"] {
  --c-bg: var(--p-surface-dark-900);
  --c-surface: var(--p-surface-dark-700);
  --c-surface-raised: var(--p-surface-dark-600);
  --c-surface-sunken: var(--p-surface-dark-800);
  --c-surface-glass: rgba(15, 30, 48, .88);
  --c-ink: var(--p-ink-dark-50);
  --c-ink-muted: var(--p-ink-dark-300);
  --c-ink-subtle: #7890a8;
  --c-line: var(--p-line-dark);
  --c-line-strong: #2a4766;
  --c-grid: var(--p-grid-dark);
  --c-brand: var(--p-cyan-600);
  --c-brand-strong: #2563a8;
  --c-brand-soft: rgba(14, 159, 217, .16);
  --c-focus: #5cc6f0;
  --c-hero-overlay: linear-gradient(135deg, rgba(0,35,73,.94) 0%, rgba(8,15,26,.96) 100%);

  --c-ok: #3cb660;      --c-ok-soft: rgba(47, 168, 79, .16);
  --c-warn: #e0a526;    --c-warn-soft: rgba(224, 165, 38, .16);
  --c-danger: #f06262;  --c-danger-soft: rgba(240, 98, 98, .15);
  --c-info: #5b9ce8;    --c-info-soft: rgba(57, 135, 229, .16);

  --dv-prod: #3987e5; --dv-neutro: #5a6b7d; --dv-distr: #d95926; --dv-alerta: #f06262;
  --cat-1: #0e9fd9; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #8f63c9;
  --cat-5: #d55181; --cat-6: #8f5018; --cat-7: #3987e5; --cat-8: #9c3a6e;
  --seq-1: #13263b; --seq-2: #163a5e; --seq-3: #1c5185; --seq-4: #2a6bb0; --seq-5: #4589d6; --seq-6: #74abea; --seq-7: #b3d2f6;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; --dur-count: 0ms; --stagger: 0ms; }
}