/* ═══ TOKENS ═══════════════════════════════════════════════════════════════
   Fonte única de cor, tipo, espaço, raio e efeito.
   base.css, components.css e screens.css não escrevem cor literal.

   Três estados de tema, não dois: escolha explícita clara, escolha explícita
   escura, e o padrão "sistema" — que não estampa atributo nenhum no <html>.
   Por isso TODO token nasce no :root nu. Um token declarado apenas dentro de
   um @media ou de um [data-theme] fica indefinido no estado sem atributo, e a
   página renderiza o texto de um tema sobre o fundo do outro.

   Contraste conferido por `node dev/contrast.js` — 33 pares, zero abaixo de
   4.5:1. Mexeu em cor aqui? Roda o script.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superfícies ───────────────────────────────────────────────────────── */
  --ground:      #f4f4f7;
  --surface:     #ffffff;
  --sunken:      #ebebf0;

  /* O herói inverte de papel entre os temas: no claro é um bloco escuro que
     se destaca do fundo claro; no escuro é uma superfície elevada, porque um
     bloco mais escuro que o fundo não se destacaria. */
  --hero:        #17172a;
  --hero-ink:    #eceaf5;
  --hero-dim:    #9d9ab8;
  --hero-line:   #45475a;

  /* ── Tinta ─────────────────────────────────────────────────────────────
     Dois níveis, não três. Um terceiro nível não sobrevive ao piso de 4.5:1
     sobre --sunken: escurecido o bastante para passar, ele converge para
     --ink-muted e deixa de ser um nível. Rótulos de 10-11px em caixa alta são
     texto normal para efeito de contraste, não texto grande — sem isenção. */
  --ink:         #191922;
  --ink-muted:   #686878;

  --line:        #e3e3ea;
  --line-strong: #cfcfda;

  /* ── Acento ────────────────────────────────────────────────────────────── */
  --accent:      #5b4bd6;
  --accent-ink:  #ffffff;
  --accent-soft: #eeebfc;

  /* ── Semânticas — estado, não marca ────────────────────────────────────── */
  --positive:      #0d7a49;
  --positive-soft: #e3f5ec;
  --negative:      #c2312a;
  --negative-soft: #fceceb;
  --warning:       #996000;
  --warning-soft:  #fdf2df;

  /* Pares dedicados para texto colorido sobre --hero: --positive claro sobre
     --hero mede 3.27:1. Valem nos três lugares onde há caixa escura — painel
     de resultado, total do PDF e o breakdown do modal de Orçamentos. */
  --hero-positive: #7fe0a8;
  --hero-negative: #ff9d94;

  /* Fundo do chip da marca. Branco nos dois temas de propósito: o logo é uma
     marca de duas cores, e o azul escuro dela mede 2,0–2,5:1 sobre --hero.
     Recolorir a marca não é opção, então a superfície é que se adapta. */
  --marca-fundo: #ffffff;

  /* ── Plataformas — dois tokens por marca ───────────────────────────────
     A cor de marca da Shopee mede 3.66:1 sobre branco: serve como bloco
     gráfico, não como texto. Em vez de descaracterizar a marca, o filete usa
     a cor real e o tipo usa a variante escurecida. */
  --mkt-shopee:      #ee4d2d;
  --mkt-shopee-ink:  #db3312;
  --mkt-ml:          #3483fa;
  --mkt-ml-ink:      #0f6cf9;
  --mkt-premium:     #b07d10;
  --mkt-premium-ink: #996c0e;

  /* ── Efeitos ───────────────────────────────────────────────────────────── */
  --scrim:      rgb(0 0 0 / 0.5);
  --shadow-sm:  0 1px 4px rgb(20 18 40 / 0.08);
  --shadow-md:  0 8px 32px rgb(20 18 40 / 0.16);
  --focus-ring: 0 0 0 3px rgb(91 75 214 / 0.25);

  /* ── Tipografia ────────────────────────────────────────────────────────
     Duas faces da mesma superfamília. Pilha de fallback real nas duas: se o
     Google Fonts não carregar, degrada sem quebrar layout. */
  --font-ui:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-num: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --fs-2xs:  10px;    /* rótulos em caixa alta */
  --fs-xs:   11.5px;  /* metadados, ROI */
  --fs-sm:   13px;    /* linhas de tabela */
  --fs-base: 14.5px;  /* corpo, inputs */
  --fs-md:   16px;    /* títulos de card */
  --fs-lg:   20px;    /* títulos de aba */
  --fs-xl:   26px;    /* preço de venda */
  --fs-2xl:  34px;    /* TOTAL no herói */

  --lh-tight: 1.2;
  --lh-base:  1.5;

  /* ── Espaço, raio ──────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;

  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* Altura da barra de navegação inferior (celular). #content usa para o
     padding-bottom, senão o último elemento fica debaixo dela. */
  --navbar-h: 58px;
}

/* ── Tema escuro por preferência do sistema ────────────────────────────────
   Guardado por :not([data-theme="light"]) para que uma escolha explícita de
   tema claro vença um sistema escuro. Só cor é redefinida aqui.

   `screen and` não é decoração: papel é sempre branco, logo impressão é sempre
   tema claro. Restringindo os dois blocos escuros a screen, o @media print cai
   sozinho no :root claro — sem precisar redeclarar a paleta inteira lá, o que
   seria duplicação pura e a única fonte de cor literal fora deste arquivo. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #121118;
    --surface:     #1b1a22;
    --sunken:      #24222c;

    --hero:        #2b2740;
    --hero-ink:    #eceaf5;
    --hero-dim:    #a8a3c0;
    --hero-line:   #45475a;

    --ink:         #eceaf1;
    --ink-muted:   #a09aae;

    --line:        #2e2b38;
    --line-strong: #3d3948;

    --accent:      #a396f7;
    --accent-ink:  #1b1a22;
    --accent-soft: #272243;

    --positive:      #5ec98f;
    --positive-soft: #16301f;
    --negative:      #ff8a80;
    --negative-soft: #331a1a;
    --warning:       #e0a752;
    --warning-soft:  #31240f;

    /* No escuro as duas variantes de plataforma coincidem: os valores claros
       já passam de 6:1 sobre --surface. */
    --marca-fundo:     #ffffff;

    --mkt-shopee:      #ff7a5c;
    --mkt-shopee-ink:  #ff7a5c;
    --mkt-ml:          #6ba5ff;
    --mkt-ml-ink:      #6ba5ff;
    --mkt-premium:     #dcaa3e;
    --mkt-premium-ink: #dcaa3e;

    --scrim:      rgb(0 0 0 / 0.65);
    --shadow-sm:  0 1px 4px rgb(0 0 0 / 0.4);
    --shadow-md:  0 8px 32px rgb(0 0 0 / 0.55);
    --focus-ring: 0 0 0 3px rgb(163 150 247 / 0.3);
  }
}

/* ── Tema escuro por escolha explícita ─────────────────────────────────────
   Repetido para que o alternador vença também quando o sistema está claro.
   Também em `screen`, pelo mesmo motivo do bloco acima. */
@media screen {
 :root[data-theme="dark"] {
  --ground:      #121118;
  --surface:     #1b1a22;
  --sunken:      #24222c;

  --hero:        #2b2740;
  --hero-ink:    #eceaf5;
  --hero-dim:    #a8a3c0;
  --hero-line:   #45475a;

  --ink:         #eceaf1;
  --ink-muted:   #a09aae;

  --line:        #2e2b38;
  --line-strong: #3d3948;

  --accent:      #a396f7;
  --accent-ink:  #1b1a22;
  --accent-soft: #272243;

  --positive:      #5ec98f;
  --positive-soft: #16301f;
  --negative:      #ff8a80;
  --negative-soft: #331a1a;
  --warning:       #e0a752;
  --warning-soft:  #31240f;

  --marca-fundo:     #ffffff;

  --mkt-shopee:      #ff7a5c;
  --mkt-shopee-ink:  #ff7a5c;
  --mkt-ml:          #6ba5ff;
  --mkt-ml-ink:      #6ba5ff;
  --mkt-premium:     #dcaa3e;
  --mkt-premium-ink: #dcaa3e;

  --scrim:      rgb(0 0 0 / 0.65);
  --shadow-sm:  0 1px 4px rgb(0 0 0 / 0.4);
  --shadow-md:  0 8px 32px rgb(0 0 0 / 0.55);
  --focus-ring: 0 0 0 3px rgb(163 150 247 / 0.3);
}
}