/* ==========================================================================
   Tokens — Amazonas Inovare
   Derivado de ~/Projects/consoleai/docs/DESIGN_SYSTEM.md, que e a fonte de
   verdade. Este arquivo NAO decide nada: transcreve. Divergiu do consoleai?
   O consoleai vence, e este arquivo esta errado.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --ai-brand-azul: #025468;              /* Pantone 7707 C */
  --ai-brand-verde: #098d93;             /* Pantone 7711 C */
  --ai-brand-gradient: linear-gradient(135deg, #025468 0%, #098d93 100%);

  /* Azul da marca para texto e icones. No dark vira #4daebc, porque #025468
     nao tem contraste sobre fundo escuro. Componentes usam SEMPRE este token
     em vez de --ai-brand-azul, e a troca de tema acontece de graca. */
  --ai-brand-azul-texto: #025468;

  /* --- Escala inovareTeal, do claro ao escuro --------------------------- */
  --ai-teal-0: #e6f3f5;
  --ai-teal-1: #b3dce2;
  --ai-teal-2: #80c5cf;
  --ai-teal-3: #4daebc;
  --ai-teal-4: #2a97a9;
  --ai-teal-5: #098d93;
  --ai-teal-6: #077a80;
  --ai-teal-7: #025468;
  --ai-teal-8: #014354;
  --ai-teal-9: #012d3a;

  /* --- Superficies (light) --------------------------------------------- */
  --ai-body-bg: #f0f4f5;                 /* tint teal, nao cinza neutro */
  --ai-card-bg: #ffffff;
  --ai-header-bg: #ffffff;
  --ai-sidebar-bg: #011e28;
  --ai-sidebar-end: #01293a;
  --ai-sidebar-active: #025468;
  --ai-stripe: #f8fbfb;                  /* linha alternada de tabela */
  --ai-hover: #e6f3f5;

  /* --- Texto (light) --------------------------------------------------- */
  --ai-text-primary: #1a2e35;            /* ~10.2:1 sobre branco */
  --ai-text-secondary: #5f7882;          /* ~4.8:1 */
  --ai-text-muted: #94aab3;              /* ~2.8:1 — nunca conteudo essencial */
  --ai-text-inverse: #ffffff;

  /* --- Bordas --------------------------------------------------------- */
  --ai-border-light: #e6f3f5;
  --ai-border-medium: #b3dce2;

  /* --- Semanticas: universais, NAO derivadas da paleta da marca -------- */
  --ai-success: #2f9e44;
  --ai-warning: #f59f00;
  --ai-danger: #e03131;
  --ai-info: #098d93;                    /* verde da marca, nunca azul genérico */

  /* Versoes para TEXTO PEQUENO. O design system registra que o verde da marca
     tem ~3.6:1 e serve "apenas large text >=18px bold, icones, decoracoes".
     Badge e rotulo em 12px precisam de um tom mais escuro da mesma escala,
     senao o padrao briga com legibilidade. */
  --ai-info-texto: #077a80;              /* teal-6, sobre fundo claro */
  --ai-success-texto: #268a3a;
  --ai-danger-texto: #c92a2a;
  --ai-warning-texto: #b57500;           /* #f59f00 nao passa como texto no claro */

  /* Fundos suaves para callouts e realce de alternativa */
  --ai-success-soft: rgba(47, 158, 68, 0.10);
  --ai-warning-soft: rgba(245, 159, 0, 0.12);
  --ai-danger-soft: rgba(224, 49, 49, 0.10);
  --ai-info-soft: rgba(9, 141, 147, 0.10);

  /* --- Sombras: sempre tint da marca, nunca preto puro ----------------- */
  --ai-shadow-xs: 0 1px 2px rgba(2, 84, 104, 0.05);
  --ai-shadow-sm: 0 1px 3px rgba(2, 84, 104, 0.06), 0 1px 2px rgba(2, 84, 104, 0.04);
  --ai-shadow-md: 0 4px 12px rgba(2, 84, 104, 0.08);
  --ai-shadow-lg: 0 12px 32px rgba(2, 84, 104, 0.10);
  --ai-shadow-xl: 0 24px 48px rgba(2, 84, 104, 0.12);
  --ai-shadow-glow: 0 0 20px rgba(9, 141, 147, 0.15);
  --ai-focus-ring: 0 0 0 2px rgba(9, 141, 147, 0.15);

  /* --- Tipografia ------------------------------------------------------ */
  /* Fallback oficial do manual e Arial. Nunca Inter, Roboto ou system-ui. */
  --ai-font-sans: "Barlow", Arial, sans-serif;
  --ai-font-mono: "JetBrains Mono", "Fira Code", monospace;

  --ai-fw-long: 300;      /* texto longo e ajuda */
  --ai-fw-body: 400;      /* corpo */
  --ai-fw-label: 500;     /* labels de campo */
  --ai-fw-sub: 600;       /* subtitulos, badges, header de tabela */
  --ai-fw-title: 700;     /* titulos */

  --ai-fs-xs: 0.75rem;
  --ai-fs-sm: 0.875rem;
  --ai-fs-md: 1rem;
  --ai-fs-lg: 1.125rem;
  --ai-fs-xl: 1.25rem;
  --ai-fs-2xl: 1.5rem;

  /* --- Forma ---------------------------------------------------------- */
  --ai-radius-xs: 4px;    /* badges */
  --ai-radius-sm: 6px;    /* inputs, botoes */
  --ai-radius-md: 8px;    /* cards, modais */
  --ai-radius-lg: 12px;   /* containers */
  --ai-radius-xl: 16px;   /* hero */

  /* --- Espacamento: base 4px, grid 8px -------------------------------- */
  --ai-sp-1: 4px;
  --ai-sp-2: 8px;
  --ai-sp-3: 12px;
  --ai-sp-4: 16px;
  --ai-sp-6: 24px;
  --ai-sp-8: 32px;
  --ai-sp-12: 48px;

  /* --- Animacao ------------------------------------------------------- */
  --ai-transition-fast: 150ms ease;
  --ai-transition-base: 200ms ease;
  --ai-transition-slow: 300ms ease;

  /* --- Graficos ------------------------------------------------------- */
  --ai-chart-1: #025468;
  --ai-chart-2: #098d93;
  --ai-chart-3: #4daebc;
  --ai-chart-4: #80c5cf;
  --ai-chart-5: #b3dce2;
  --ai-chart-grid: #e6f3f5;
  --ai-chart-tooltip-bg: #025468;
  --ai-chart-tooltip-text: #ffffff;

  /* --- Pattern triangular: atmosfera, nunca decoracao ----------------- */
  --ai-pattern-corpo-opacity: 0.018;     /* faixa 0,015–0,02 em #025468 */
  --ai-pattern-capa-opacity: 0.05;       /* faixa 0,04–0,06 em #ffffff */
  --ai-pattern-empty-opacity: 0.10;      /* faixa 0,08–0,12 em #b3dce2 */
}

/* ==========================================================================
   Dark mode
   O design system usa [data-mantine-color-scheme="dark"]. Aqui nao ha Mantine,
   entao o gatilho e prefers-color-scheme, com override por data-theme para o
   toggle do visualizador — que precisa vencer nos dois sentidos.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ai-brand-azul-texto: #4daebc;

    --ai-body-bg: #0a1f28;
    --ai-card-bg: #122f3a;
    --ai-header-bg: #0f2a33;
    --ai-sidebar-bg: #011e28;
    --ai-sidebar-end: #01293a;

    --ai-text-primary: #e6f3f5;
    --ai-text-secondary: #94aab3;
    --ai-text-muted: #5f7882;

    --ai-border-light: rgba(9, 141, 147, 0.12);
    --ai-border-medium: rgba(9, 141, 147, 0.20);

    /* Derivado: o design system nao tabela stripe e hover no dark. Mantidos no
       tint da marca, coerentes com as bordas rgba(9,141,147,*) que ele define. */
    --ai-stripe: rgba(9, 141, 147, 0.04);
    --ai-hover: rgba(9, 141, 147, 0.08);

    --ai-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
    --ai-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20);
    --ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --ai-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.30);
    --ai-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.35);

    /* A sequencial desloca para cima da escala no escuro. O design system manda
       trocar o azul da marca por #4daebc sobre fundo escuro por contraste; a
       mesma razao vale para serie de grafico, e #025468 sobre #122f3a e
       praticamente invisivel. */
    --ai-chart-1: #098d93;
    --ai-chart-2: #4daebc;
    --ai-chart-3: #80c5cf;
    --ai-chart-4: #b3dce2;
    --ai-chart-5: #e6f3f5;
    --ai-chart-grid: rgba(9, 141, 147, 0.12);
    --ai-chart-tooltip-bg: #122f3a;

    /* Texto pequeno no escuro: tons claros da escala. */
    --ai-info-texto: #4daebc;
    --ai-success-texto: #51cf66;
    --ai-danger-texto: #ff8787;
    --ai-warning-texto: #ffd43b;

    /* O pattern claro sobre fundo escuro rende muito mais contraste que sobre
       branco. Mesma faixa do manual, extremo inferior, para continuar sendo
       atmosfera e nao decoracao. */
    --ai-pattern-empty-opacity: 0.04;
    --ai-pattern-corpo-opacity: 0.03;
  }
}

:root[data-theme="dark"] {
  --ai-brand-azul-texto: #4daebc;

  --ai-body-bg: #0a1f28;
  --ai-card-bg: #122f3a;
  --ai-header-bg: #0f2a33;
  --ai-sidebar-bg: #011e28;
  --ai-sidebar-end: #01293a;

  --ai-text-primary: #e6f3f5;
  --ai-text-secondary: #94aab3;
  --ai-text-muted: #5f7882;

  --ai-border-light: rgba(9, 141, 147, 0.12);
  --ai-border-medium: rgba(9, 141, 147, 0.20);
  --ai-stripe: rgba(9, 141, 147, 0.04);
  --ai-hover: rgba(9, 141, 147, 0.08);

  --ai-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --ai-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.20);
  --ai-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --ai-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.30);
  --ai-shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.35);

  --ai-chart-1: #098d93;
  --ai-chart-2: #4daebc;
  --ai-chart-3: #80c5cf;
  --ai-chart-4: #b3dce2;
  --ai-chart-5: #e6f3f5;
  --ai-chart-grid: rgba(9, 141, 147, 0.12);
  --ai-chart-tooltip-bg: #122f3a;

  --ai-info-texto: #4daebc;
  --ai-success-texto: #51cf66;
  --ai-danger-texto: #ff8787;
  --ai-warning-texto: #ffd43b;

  --ai-pattern-empty-opacity: 0.04;
  --ai-pattern-corpo-opacity: 0.03;
}