/* ARGOS — design tokens
   Ligue este arquivo antes do CSS de componentes.
   Tema: :root = claro · :root[data-theme="dark"] = escuro · sem atributo = segue o sistema.
   Nomes estáveis: não renomear; adicionar sempre ao lado. */

:root {
  /* ---- Tipografia ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;   /* eyebrow, cabeçalho de tabela */
  --fs-sm: 12.5px; /* badges, legendas, células densas */
  --fs-base: 14px; /* corpo */
  --fs-md: 15px;   /* títulos de card */
  --fs-lg: 18px;   /* h2 */
  --fs-xl: 24px;   /* h1 de página */
  --fs-2xl: 32px;  /* KPI */
  --fs-3xl: 44px;  /* número-herói (mobile, dashboard) */
  --lh-tight: 1.15;
  --lh-base: 1.5;
  --tracking-caps: 0.08em; /* eyebrows em caixa alta */
  --tnum: "tnum" 1, "cv01" 1; /* números tabulares (Geist) */

  /* ---- Espaçamento (grelha de 4) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---- Layout ---- */
  --sidebar-w: 232px;
  --topbar-h: 56px;
  --content-max: 1360px;
  --control-h: 32px;     /* altura padrão de botão/input */
  --control-h-sm: 26px;
  --control-h-lg: 44px;  /* mobile / login */

  /* ---- Raios (pequenos e precisos) ---- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 8px;
  --radius-full: 999px; /* só em dots e no toggle */

  /* ---- Sombra (mínima) ---- */
  --shadow: 0 1px 0 rgba(22, 22, 16, 0.04);
  --shadow-pop: 0 4px 12px rgba(22, 22, 16, 0.08), 0 0 0 1px var(--line);

  /* ---- Movimento ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 120ms;

  /* ---- Cores — CLARO ---- */
  color-scheme: light;
  --bg: #f4f4ef;
  --surface: #ffffff;
  --surface-2: #faf9f5;
  --surface-3: #efeee8;
  --ink: #17181a;
  --ink-2: #3a3b3d;      /* texto secundário forte */
  --muted: #64665f;      /* 5.6:1 em surface */
  --faint: #9a9c93;      /* só decorativo / placeholder */
  --line: #e4e3dc;
  --line-2: #d3d2c9;
  --line-strong: #b9b8ae;

  --accent: #2b5fc7;     /* azul da logo, disciplinado · 5.9:1 em branco */
  --accent-hover: #244fa8;
  --accent-bg: #e8eefb;
  --accent-ink: #ffffff;
  --accent-text: #2455b8; /* links e texto em acento · 6.4:1 */
  --focus: rgba(43, 95, 199, 0.35);

  --ok: #17734f;     --ok-bg: #e2f2ea;     --ok-dot: #1f9463;
  --warn: #8a5510;   --warn-bg: #f9ecd3;   --warn-dot: #c7861f;
  --danger: #a82a2a; --danger-bg: #f9e3e1; --danger-dot: #d24a4a;
  --info: #2455b8;   --info-bg: #e8eefb;   --info-dot: #2b5fc7;
  --neutral: #64665f; --neutral-bg: #eeede7; --neutral-dot: #9a9c93;

  --whatsapp: #1e8e57; /* verde de marca contido, usado só nesse botão */
  --whatsapp-bg: #e2f2ea;

  --chart-1: var(--accent);
  --chart-2: #1f9463;
  --chart-muted: var(--line-2);
  --selection: rgba(43, 95, 199, 0.18);
  --overlay: rgba(23, 24, 26, 0.32);
}

/* ---- ESCURO (explícito) ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101112;
  --surface: #17181a;
  --surface-2: #1c1d20;
  --surface-3: #232428;
  --ink: #ecebe6;
  --ink-2: #c9c8c2;
  --muted: #a3a29b;      /* 7.5:1 em surface */
  --faint: #6d6d68;
  --line: #292a2e;
  --line-2: #35363b;
  --line-strong: #4a4b51;

  --accent: #7ea6f0;     /* 8.6:1 em surface */
  --accent-hover: #98b8f4;
  --accent-bg: #172440;
  --accent-ink: #0b1224;
  --accent-text: #8fb2f2;
  --focus: rgba(126, 166, 240, 0.4);

  --ok: #6dd1a3;     --ok-bg: #12291f;     --ok-dot: #4dbf88;
  --warn: #e3b061;   --warn-bg: #2d2311;   --warn-dot: #d59a3a;
  --danger: #f09090; --danger-bg: #351a1a; --danger-dot: #e06565;
  --info: #8fb2f2;   --info-bg: #172440;   --info-dot: #7ea6f0;
  --neutral: #a3a29b; --neutral-bg: #232428; --neutral-dot: #6d6d68;

  --whatsapp: #5fcf9a;
  --whatsapp-bg: #12291f;

  --chart-2: #4dbf88;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-pop: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line-2);
  --selection: rgba(126, 166, 240, 0.28);
  --overlay: rgba(0, 0, 0, 0.55);
}

/* ---- ESCURO (segue o sistema, quando não há data-theme) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #101112; --surface: #17181a; --surface-2: #1c1d20; --surface-3: #232428;
    --ink: #ecebe6; --ink-2: #c9c8c2; --muted: #a3a29b; --faint: #6d6d68;
    --line: #292a2e; --line-2: #35363b; --line-strong: #4a4b51;
    --accent: #7ea6f0; --accent-hover: #98b8f4; --accent-bg: #172440; --accent-ink: #0b1224; --accent-text: #8fb2f2;
    --focus: rgba(126, 166, 240, 0.4);
    --ok: #6dd1a3; --ok-bg: #12291f; --ok-dot: #4dbf88;
    --warn: #e3b061; --warn-bg: #2d2311; --warn-dot: #d59a3a;
    --danger: #f09090; --danger-bg: #351a1a; --danger-dot: #e06565;
    --info: #8fb2f2; --info-bg: #172440; --info-dot: #7ea6f0;
    --neutral: #a3a29b; --neutral-bg: #232428; --neutral-dot: #6d6d68;
    --whatsapp: #5fcf9a; --whatsapp-bg: #12291f;
    --chart-2: #4dbf88;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    --shadow-pop: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line-2);
    --selection: rgba(126, 166, 240, 0.28); --overlay: rgba(0, 0, 0, 0.55);
  }
}