/* ==========================================================================
   MaidOS — tokens.css
   Fonte: @specs/design.md item 2 (paleta), 5.1 (espaço/raio), 5.2 (sombra), 6.1 (tipografia)

   Este arquivo é o único que a futura versão EN-US reaproveita sem alteração.
   Nenhum valor aqui pode ser inventado — todos vêm da paleta extraída da logo.
   ========================================================================== */

:root{

  /* ---------- Superfícies claras — design.md 2.1 ---------- */
  --paper-000:#FFFFFF;   /* cards, molduras de produto */
  --paper-050:#FAFAFB;   /* fundo padrão da página */
  --paper-100:#F4F4F7;   /* seção alternada */
  --paper-200:#ECECF1;   /* superfície pressionada, chips, code */

  /* ---------- Linhas e bordas — design.md 2.2 ----------
     Na direção clara a borda é a principal ferramenta de profundidade. */
  --line-100:#F0F0F4;
  --line-200:#E5E5EC;    /* borda padrão de card */
  --line-300:#D5D5E0;
  --line-violet:rgba(120,36,228,.28);

  /* ---------- Âncoras escuras — design.md 2.3 ----------
     TETO DE QUATRO ÁREAS ESCURAS NA PÁGINA INTEIRA:
     navbar pill · seção 3 (Problema) · card de CTA final · footer.
     Nenhuma quinta. design.md 2.7 regra 2. */
  --ink-950:#0A0A0D;     /* footer */
  --ink-900:#0D0D11;     /* navbar pill, seção 3, card de CTA final */
  --ink-800:#16161C;     /* superfície elevada dentro de área escura */

  /* ---------- Roxo da marca — design.md 2.4 ----------
     Contraste medido sobre branco. Respeitar os papéis. */
  --violet-300:#AC76F7;  /* 2.9:1  — decorativo. NUNCA texto sobre claro.
                            É o destaque de título DENTRO das âncoras escuras. */
  --violet-400:#9A3EF4;  /* 4.8:1  — só texto ≥ 24px */
  --violet-500:#7824E4;  /* 6.7:1  — COR PRIMÁRIA: botões, links, destaque de título */
  --violet-600:#6525B6;  /* 9.0:1  — hover de link */
  --violet-700:#5111B7;  /* 10.4:1 — hover/pressed de botão primário */
  --violet-800:#401190;  /* 12.6:1 — ênfase máxima, uso raro */
  --violet-900:#361351;  /* 14.1:1 — texto sobre wash roxo */

  /* Gradiente oficial. Uso restrito: no máximo um elemento gráfico por página.
     PROIBIDO em fundo de seção. design.md 2.4 */
  --gradiente-marca:linear-gradient(135deg,#9A3EF4 0%,#7824E4 45%,#5111B7 100%);

  /* Wash — substitui o "glow". Sobre fundo claro não existe brilho, existe
     tintura. Opacidade máxima 0.11. design.md 2.4 */
  --wash-violet:radial-gradient(ellipse,rgba(154,62,244,.07) 0%,transparent 70%);
  --wash-violet-forte:radial-gradient(ellipse,rgba(154,62,244,.11) 0%,transparent 70%);

  /* ---------- Texto — design.md 2.5 ---------- */
  --text-primary:#0D0D11;
  --text-secondary:#4A4A57;
  --text-muted:#6E6E7A;          /* só ≥ 14px */
  --text-on-dark:#F5F5F7;
  --text-on-dark-soft:rgba(245,245,247,.72);
  --text-on-violet:#FFFFFF;

  /* ---------- Cores funcionais — design.md 2.6 ----------
     EXCLUSIVAS de representações de status do produto.
     Nunca como cor de marca ou de interface do site. */
  --status-ok:#1F9D6B;
  --status-wait:#B87A0C;
  --status-live:#7824E4;

  /* ---------- Tipografia — design.md 6 ---------- */
  --fonte-titulo:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fonte-corpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Escala fluida. clamp() evita quebras entre breakpoints.
     Extremos conforme design.md 6.1 */
  --fs-h1:clamp(2.25rem,1.35rem + 3.9vw,4rem);      /* 36 → 64 */
  --fs-h2:clamp(1.875rem,1.42rem + 1.95vw,2.75rem); /* 30 → 44 */
  --fs-h3:clamp(1.25rem,1.19rem + 0.26vw,1.375rem); /* 20 → 22 */
  --fs-corpo-g:clamp(1.0625rem,1.0rem + 0.26vw,1.1875rem); /* 17 → 19 */
  --fs-corpo:1rem;
  --fs-eyebrow:clamp(.75rem,.72rem + .13vw,.8125rem);
  --fs-legenda:clamp(.8125rem,.79rem + .13vw,.875rem);

  --lh-h1:1.05;  --ls-h1:-.03em;
  --lh-h2:1.15;  --ls-h2:-.02em;
  --lh-h3:1.3;   --ls-h3:-.01em;
  --lh-corpo:1.65;

  /* ---------- Espaçamento — design.md 5.1 ---------- */
  --e-1:4px;   --e-2:8px;   --e-3:12px;  --e-4:16px;
  --e-6:24px;  --e-8:32px;  --e-12:48px; --e-16:64px;
  --e-24:96px; --e-32:128px;

  --container:1200px;
  --gutter:32px;
  --secao-y:128px;

  /* ---------- Raio — design.md 5.1 ---------- */
  --r-card:20px;
  --r-btn:12px;
  --r-pill:999px;
  --r-moldura:16px;

  /* ---------- Sombra — design.md 5.2 ----------
     TETO ABSOLUTO: 0.14 de opacidade. Sombra pesada é o erro nº 1
     em layout claro. Sempre neutra-fria, nunca preta pura. */
  --shadow-xs:0 1px 2px rgba(13,13,17,.04);
  --shadow-sm:0 2px 8px rgba(13,13,17,.05);
  --shadow-md:0 8px 24px rgba(13,13,17,.07);
  --shadow-lg:0 24px 56px rgba(13,13,17,.10);
  --shadow-violet:0 24px 56px rgba(120,36,228,.14); /* SÓ a moldura do hero */

  /* ---------- Movimento — design.md 9.1 ---------- */
  --ease-saida:cubic-bezier(.16,1,.3,1);
  --t-entrada:600ms;
  --t-card:200ms;
  --t-btn:180ms;
  --stagger:80ms;
}

/* Tablet e celular — design.md 5.1 e 10 */
@media (max-width:1023px){
  :root{ --secao-y:96px; }
}
@media (max-width:767px){
  :root{ --gutter:20px; --secao-y:72px; }
}