/**
 * DESIGN TOKENS — um dos quatro arquivos que isolam "o que varia".
 * Rebrand completo de cliente = trocar este arquivo. Nada mais.
 *
 * PALETA
 * O neutro tem viés azul (não é cinza puro): num painel cheio de números, o
 * cinza neutro puro lê como "não escolhido" e suja o contraste dos dados.
 *
 * As cores têm papéis SEPARADOS, e isso não é estética:
 *   --accent    (petróleo)  interação da interface
 *   --pos/--neg             SEMÂNTICA apenas (subiu/caiu)
 *   --serie-*               papéis do gráfico temporal
 *   --cat-1..8              identidade de série (paleta validada)
 *
 * Verde e vermelho nunca identificam série. Se identificassem, um gráfico com
 * duas linhas coloridas passaria a dizer "bom" e "ruim" sem querer.
 */

:root {
  /* ---------------------------------------------------------- superfícies */
  --bg:            #F0F2F5;
  --surface:       #FFFFFF;
  --surface-2:     #F5F7F9;
  --surface-3:     #E9EDF1;
  --surface-hover: #F2F5F8;

  /* ------------------------------------------------------------- conteúdo */
  --text:      #131A22;
  --text-2:    #48566A;
  --text-3:    #6F7D91;
  --text-4:    #97A3B4;

  /* --------------------------------------------------------------- linhas */
  --line:      #DEE3EA;
  --line-2:    #C6CEDA;
  --line-3:    #A9B4C4;

  /* ---------------------------------------------------------------- marca */
  --accent:       #0E6B68;
  --accent-hover: #0B5754;
  --accent-strong:#094F4D;
  --accent-soft:  #E2F0EF;
  --accent-ring:  rgba(14,107,104,.32);
  --on-accent:    #FFFFFF;

  /* ----------------------------------------------------------- semânticas */
  --pos:       #14724A;
  --pos-soft:  #DFF1E8;
  --neg:       #A63229;
  --neg-soft:  #FAE6E3;
  --goal:      #9A6B12;
  --goal-soft: #F7ECD8;
  --info:      #245C96;
  --info-soft: #E4EEF8;

  /* =================================================== PALETA DE GRÁFICOS
   * Validada com o script de seis checks (faixa de luminância, piso de croma,
   * separação sob daltonismo, piso de visão normal, contraste) nas superfícies
   * deste projeto — claro #FFFFFF e escuro #131A23. NÃO reordenar nem trocar
   * valor sem revalidar: a ORDEM é o mecanismo de segurança para daltonismo,
   * não escolha estética.
   *
   * A paleta da marca (petróleo/âmbar) reprovou em três checks quando usada
   * como categórica — o petróleo tem croma 0,079 e lê como cinza, e o par
   * petróleo↔azul ficava com ΔE 11,3 (piso 15). A marca segue mandando na
   * interface; a identificação de séries usa a paleta validada abaixo.
   *
   * Ressalva registrada: no modo claro, aqua, amarelo e magenta ficam abaixo
   * de 3:1 contra o branco. A regra de alívio se aplica e está cumprida —
   * todo gráfico categórico tem rótulo direto e existe visão em tabela. */

  /* ------------------------------------ categórica — identidade de série */
  --cat-1: #2a78d6;   /* azul     */
  --cat-2: #eb6834;   /* laranja  */
  --cat-3: #1baf7a;   /* aqua     */
  --cat-4: #eda100;   /* amarelo  */
  --cat-5: #e87ba4;   /* magenta  */
  --cat-6: #008300;   /* verde    */
  --cat-7: #4a3aa7;   /* violeta  */
  --cat-8: #e34948;   /* vermelho */

  /* Fundo suave por trás do ícone, mesmo padrão de --accent-soft/--pos-soft —
     dá o "badge colorido" dos cards de KPI sem inventar cor fora da paleta
     validada acima. */
  --cat-1-soft: #E3ECF9;
  --cat-2-soft: #FBE9E1;
  --cat-3-soft: #DFF3EC;
  --cat-4-soft: #FBEED8;
  --cat-5-soft: #FBE6ED;
  --cat-6-soft: #DFF0DF;
  --cat-7-soft: #E7E4F6;
  --cat-8-soft: #FAE2E1;

  /* --------------------------- papéis semânticos — NÃO são slots categóricos
   * Estes três aparecem juntos no gráfico temporal. Não precisam de separação
   * mútua sob daltonismo porque cada um traz codificação secundária: "atual"
   * é traço grosso, "anterior" é fino e cinza, "meta" é sempre tracejada. */
  --serie-atual:     #00918A;   /* croma 0,103 — acima do piso, não lê cinza */
  --serie-anterior:  #94A2B4;
  --serie-meta:      #9A6B12;
  --serie-projecao:  #6F7D91;

  /* ------------------- sequencial (heatmap) — um matiz, claro → escuro */
  --seq-1: #E4F2F0;
  --seq-2: #B9DEDA;
  --seq-3: #7FC4BE;
  --seq-4: #43A69E;
  --seq-5: #1B857E;
  --seq-6: #0B6460;

  /* ------ divergente (crescimento) — dois polos + cinza neutro no meio.
   * A DIREÇÃO da barra em relação ao zero é a codificação primária; a cor
   * só reforça. Por isso o par quente/frio convencional é seguro aqui. */
  --div-neg: #A63229;
  --div-mid: #B9C0CB;
  --div-pos: #14724A;

  /* ------------------------------------------------ cromo do gráfico */
  --chart-grid:  #EAEEF3;
  --chart-axis:  #C6CEDA;
  --chart-ink:   #48566A;
  --chart-ink-2: #6F7D91;

  /* ------------------------------------------------------------ tipografia */
  --font-ui:   Archivo, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-2xs: 0.6875rem;   /* 11px — rótulos de eixo, badges           */
  --fs-xs:  0.75rem;     /* 12px — legendas, ajuda                   */
  --fs-sm:  0.8125rem;   /* 13px — tabelas                           */
  --fs-md:  0.875rem;    /* 14px — corpo da UI                       */
  --fs-lg:  1rem;        /* 16px — títulos de card                   */
  --fs-xl:  1.25rem;     /* 20px — título de página                  */
  --fs-kpi: 1.3rem;      /* ~21px — valor do KPI (Executivo, compacto) */
  --fs-kpi-lg: 1.5rem;   /* 24px — KPI em destaque                   */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.5;

  --ls-label: .085em;    /* rótulo em caixa alta precisa de respiro   */
  --ls-tight: -.011em;

  /* --------------------------------------------------------- espaçamento */
  /* Escala de 4px. Tudo que espaça sai daqui — nada de margem improvisada. */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px;

  /* ------------------------------------------------------------- formas */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(19,26,34,.06), 0 0 0 1px rgba(19,26,34,.04);
  --sh-2: 0 2px 4px rgba(19,26,34,.07), 0 0 0 1px rgba(19,26,34,.05);
  --sh-3: 0 8px 24px rgba(19,26,34,.12), 0 0 0 1px rgba(19,26,34,.06);
  --sh-pop: 0 12px 32px rgba(19,26,34,.18);

  /* ------------------------------------------------------------ estrutura */
  --sidebar-w:      232px;
  --sidebar-w-min:  60px;
  --topbar-h:       56px;
  --filterbar-h:    52px;

  /* ------------------------------------------------------------- moção */
  --t-fast: 110ms cubic-bezier(.4,0,.2,1);
  --t-base: 180ms cubic-bezier(.4,0,.2,1);

  --z-sticky: 10;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 2000;
}

/* ============================================================== DARK ==== */
/* Três estados: escolha explícita (data-theme), e o padrão "sistema", que
   não estampa nada — por isso a media query também precisa existir.        */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0B1017;
    --surface:       #131A23;
    --surface-2:     #1A222D;
    --surface-3:     #232D3A;
    --surface-hover: #1E2733;

    --text:   #E7ECF2;
    --text-2: #AFBCCB;
    --text-3: #8494A6;
    --text-4: #647486;

    --line:   #232D39;
    --line-2: #33404F;
    --line-3: #465566;

    --accent:        #2FA39D;
    --accent-hover:  #3DB5AE;
    --accent-strong: #56C6BF;
    --accent-soft:   #10312F;
    --accent-ring:   rgba(47,163,157,.38);
    --on-accent:     #04211F;

    --pos:       #4CAF7D;
    --pos-soft:  #102A1F;
    --neg:       #E0776B;
    --neg-soft:  #2E1714;
    --goal:      #D6A448;
    --goal-soft: #2B2213;
    --info:      #6BA3DC;
    --info-soft: #12212F;

    /* --- paleta de gráficos, degraus escolhidos para a superfície escura --- */
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500;
    --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767;

    --cat-1-soft: #14243B; --cat-2-soft: #2E1D14; --cat-3-soft: #10281F;
    --cat-4-soft: #2B2113; --cat-5-soft: #2C1620; --cat-6-soft: #132A17;
    --cat-7-soft: #201B3A; --cat-8-soft: #2E1817;

    --serie-atual:    #2FA39D;
    --serie-anterior: #6C7C90;
    --serie-meta:     #D6A448;
    --serie-projecao: #8494A6;

    --seq-1: #0E2B29; --seq-2: #13413D; --seq-3: #1A5B56;
    --seq-4: #23786F; --seq-5: #2F9990; --seq-6: #4FBDB3;

    --div-neg: #E0776B; --div-mid: #46586C; --div-pos: #4CAF7D;

    --chart-grid:  #1E2732;
    --chart-axis:  #33404F;
    --chart-ink:   #AFBCCB;
    --chart-ink-2: #8494A6;

    --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
    --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
    --sh-3: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
    --sh-pop: 0 12px 32px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"] {
  --bg:            #0B1017;
  --surface:       #131A23;
  --surface-2:     #1A222D;
  --surface-3:     #232D3A;
  --surface-hover: #1E2733;

  --text:   #E7ECF2;
  --text-2: #AFBCCB;
  --text-3: #8494A6;
  --text-4: #647486;

  --line:   #232D39;
  --line-2: #33404F;
  --line-3: #465566;

  --accent:        #2FA39D;
  --accent-hover:  #3DB5AE;
  --accent-strong: #56C6BF;
  --accent-soft:   #10312F;
  --accent-ring:   rgba(47,163,157,.38);
  --on-accent:     #04211F;

  --pos:       #4CAF7D;
  --pos-soft:  #102A1F;
  --neg:       #E0776B;
  --neg-soft:  #2E1714;
  --goal:      #D6A448;
  --goal-soft: #2B2213;
  --info:      #6BA3DC;
  --info-soft: #12212F;

    /* --- paleta de gráficos, degraus escolhidos para a superfície escura --- */
    --cat-1: #3987e5; --cat-2: #d95926; --cat-3: #199e70; --cat-4: #c98500;
    --cat-5: #d55181; --cat-6: #008300; --cat-7: #9085e9; --cat-8: #e66767;

    --cat-1-soft: #14243B; --cat-2-soft: #2E1D14; --cat-3-soft: #10281F;
    --cat-4-soft: #2B2113; --cat-5-soft: #2C1620; --cat-6-soft: #132A17;
    --cat-7-soft: #201B3A; --cat-8-soft: #2E1817;

    --serie-atual:    #2FA39D;
    --serie-anterior: #6C7C90;
    --serie-meta:     #D6A448;
    --serie-projecao: #8494A6;

    --seq-1: #0E2B29; --seq-2: #13413D; --seq-3: #1A5B56;
    --seq-4: #23786F; --seq-5: #2F9990; --seq-6: #4FBDB3;

    --div-neg: #E0776B; --div-mid: #46586C; --div-pos: #4CAF7D;

    --chart-grid:  #1E2732;
    --chart-axis:  #33404F;
    --chart-ink:   #AFBCCB;
    --chart-ink-2: #8494A6;

  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
  --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05);
  --sh-3: 0 8px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  --sh-pop: 0 12px 32px rgba(0,0,0,.6);
}