/* ============================================================
   NexiaFit — Tokens
   Fonte única de cor, espaço, tipo, raio, sombra e movimento.
   Nenhum valor solto fora daqui. Claro e escuro no mesmo arquivo.
   ============================================================ */

:root {
  /* ---- Escala neutra (grafite) ---------------------------- */
  --gray-0:  #ffffff;
  --gray-25: #fafbfa;
  --gray-50: #f4f6f4;
  --gray-100:#e8ebe8;
  --gray-200:#d6dbd6;
  --gray-300:#b6bdb6;
  --gray-400:#8b948b;
  --gray-500:#69726a;
  --gray-600:#4d554e;
  --gray-700:#363d37;
  --gray-800:#232823;
  --gray-900:#161a16;
  --gray-950:#0d0f0d;

  /* ---- Marca: volt sobre grafite -------------------------- */
  --volt-100:#f2ffbc;
  --volt-200:#e6ff80;
  --volt-300:#d4f93f;
  --volt-400:#c2ec00;   /* marca */
  --volt-500:#a8cf00;
  --volt-600:#89a800;
  --volt-700:#657a06;

  /* ---- Semânticas ----------------------------------------- */
  --ok-100:#d9f5e6;  --ok-400:#12a05f;  --ok-600:#0b7a48;
  --avi-100:#fdeecd; --avi-400:#c98a06; --avi-600:#9a6704;
  --per-100:#fbdedb; --per-400:#d63c2c; --per-600:#a72a1d;
  --inf-100:#dbeafe; --inf-400:#2a6ff0; --inf-600:#1c4fb5;

  /* ---- Papéis de cor · tema claro ------------------------- */
  --fundo:            var(--gray-50);
  --superficie:       var(--gray-0);
  --superficie-2:     var(--gray-25);
  --superficie-alta:  var(--gray-0);
  --borda:            var(--gray-200);
  --borda-forte:      var(--gray-300);
  --texto:            var(--gray-900);
  --texto-2:          var(--gray-600);
  --texto-3:          var(--gray-500);
  --texto-invertido:  var(--gray-0);

  --marca:            var(--volt-400);
  --marca-forte:      var(--volt-600);
  --marca-suave:      var(--volt-100);
  --marca-texto:      var(--volt-700);
  --sobre-marca:      var(--gray-950);

  --ok:    var(--ok-400);    --ok-fundo:  var(--ok-100);   --ok-texto:  var(--ok-600);
  --aviso: var(--avi-400);   --aviso-fundo: var(--avi-100);--aviso-texto: var(--avi-600);
  --perigo:var(--per-400);   --perigo-fundo: var(--per-100);--perigo-texto: var(--per-600);
  --info:  var(--inf-400);   --info-fundo: var(--inf-100); --info-texto: var(--inf-600);

  --lateral-fundo:  var(--gray-950);
  --lateral-texto:  var(--gray-300);
  --lateral-ativo:  var(--gray-800);
  --lateral-borda:  #23282300;

  /* ---- Tipografia fluida (360 → 1440) --------------------- */
  --fonte:       "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-titulo:"Space Grotesk", var(--fonte);
  --fonte-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --t-xs:  clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem);
  --t-sm:  clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem);
  --t-md:  clamp(0.9375rem, 0.92rem + 0.10vw, 1rem);
  --t-lg:  clamp(1.0625rem, 1.02rem + 0.20vw, 1.1875rem);
  --t-xl:  clamp(1.25rem, 1.17rem + 0.35vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 1.35rem + 0.65vw, 2rem);
  --t-3xl: clamp(1.875rem, 1.6rem + 1.15vw, 2.75rem);
  --t-num: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);   /* números de KPI */

  --peso-normal: 400;
  --peso-medio:  500;
  --peso-forte:  600;
  --peso-alto:   700;

  --altura-apertada: 1.15;
  --altura-normal:   1.5;
  --altura-solta:    1.65;

  /* ---- Espaço (escala 4px, fluida nos degraus maiores) ---- */
  --e-3xs: 0.125rem;
  --e-2xs: 0.25rem;
  --e-xs:  0.5rem;
  --e-sm:  0.75rem;
  --e-md:  1rem;
  --e-lg:  1.5rem;
  --e-xl:  clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --e-2xl: clamp(2.5rem, 2rem + 2vw, 4rem);

  /* ritmo vertical do utilitário de fluxo */
  --fluxo: var(--e-md);

  /* ---- Raio ---------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Sombra em camadas --------------------------------- */
  --s-1: 0 1px 1px rgb(13 15 13 / .04), 0 2px 4px rgb(13 15 13 / .04);
  --s-2: 0 1px 2px rgb(13 15 13 / .05), 0 3px 8px rgb(13 15 13 / .06), 0 8px 20px rgb(13 15 13 / .04);
  --s-3: 0 2px 4px rgb(13 15 13 / .06), 0 8px 18px rgb(13 15 13 / .08), 0 22px 48px rgb(13 15 13 / .08);
  --s-foco: 0 0 0 3px color-mix(in oklab, var(--volt-400) 55%, transparent);

  /* ---- Movimento ----------------------------------------- */
  --mov-rapido: 120ms;
  --mov-base:   200ms;
  --mov-calmo:  340ms;
  --curva:      cubic-bezier(.2, .7, .3, 1);
  --curva-saida:cubic-bezier(.4, 0, 1, 1);

  /* ---- Estrutura ----------------------------------------- */
  --lateral-largura: 15rem;
  --conteudo-max: 82rem;
  --topo-altura: 3.75rem;
  --toque-min: 44px;
}

/* ---- Tema escuro: só os papéis mudam --------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo:           var(--gray-950);
    --superficie:      var(--gray-900);
    --superficie-2:    var(--gray-800);
    --superficie-alta: var(--gray-800);
    --borda:           #2b312c;
    --borda-forte:     #3c443d;
    --texto:           var(--gray-50);
    --texto-2:         var(--gray-300);
    --texto-3:         var(--gray-400);

    --marca-suave:     color-mix(in oklab, var(--volt-400) 16%, var(--gray-900));
    --marca-texto:     var(--volt-300);

    --ok-fundo:     color-mix(in oklab, var(--ok-400) 18%, var(--gray-900));
    --ok-texto:     #5fd39b;
    --aviso-fundo:  color-mix(in oklab, var(--avi-400) 18%, var(--gray-900));
    --aviso-texto:  #f0c14b;
    --perigo-fundo: color-mix(in oklab, var(--per-400) 18%, var(--gray-900));
    --perigo-texto: #ff8b7d;
    --info-fundo:   color-mix(in oklab, var(--inf-400) 18%, var(--gray-900));
    --info-texto:   #7fadff;

    --lateral-fundo: #090b09;
    --lateral-ativo: var(--gray-800);
    --lateral-borda: var(--borda);

    --s-1: 0 1px 1px rgb(0 0 0 / .3), 0 2px 4px rgb(0 0 0 / .3);
    --s-2: 0 1px 2px rgb(0 0 0 / .35), 0 3px 8px rgb(0 0 0 / .35), 0 8px 20px rgb(0 0 0 / .3);
    --s-3: 0 2px 4px rgb(0 0 0 / .4), 0 8px 18px rgb(0 0 0 / .4), 0 22px 48px rgb(0 0 0 / .4);
  }
}

:root[data-tema="escuro"] {
  --fundo:           var(--gray-950);
  --superficie:      var(--gray-900);
  --superficie-2:    var(--gray-800);
  --superficie-alta: var(--gray-800);
  --borda:           #2b312c;
  --borda-forte:     #3c443d;
  --texto:           var(--gray-50);
  --texto-2:         var(--gray-300);
  --texto-3:         var(--gray-400);

  --marca-suave:     color-mix(in oklab, var(--volt-400) 16%, var(--gray-900));
  --marca-texto:     var(--volt-300);

  --ok-fundo:     color-mix(in oklab, var(--ok-400) 18%, var(--gray-900));
  --ok-texto:     #5fd39b;
  --aviso-fundo:  color-mix(in oklab, var(--avi-400) 18%, var(--gray-900));
  --aviso-texto:  #f0c14b;
  --perigo-fundo: color-mix(in oklab, var(--per-400) 18%, var(--gray-900));
  --perigo-texto: #ff8b7d;
  --info-fundo:   color-mix(in oklab, var(--inf-400) 18%, var(--gray-900));
  --info-texto:   #7fadff;

  --lateral-fundo: #090b09;
  --lateral-ativo: var(--gray-800);
  --lateral-borda: var(--borda);

  --s-1: 0 1px 1px rgb(0 0 0 / .3), 0 2px 4px rgb(0 0 0 / .3);
  --s-2: 0 1px 2px rgb(0 0 0 / .35), 0 3px 8px rgb(0 0 0 / .35), 0 8px 20px rgb(0 0 0 / .3);
  --s-3: 0 2px 4px rgb(0 0 0 / .4), 0 8px 18px rgb(0 0 0 / .4), 0 22px 48px rgb(0 0 0 / .4);
}