/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — DIREÇÃO "SLICER"
   Fonte única de verdade dos tokens. Nenhum valor bruto de cor, fonte, espaço
   ou raio deve aparecer numa página do projeto: tudo vem daqui.

   Aprovado pelo dono em 2026-07-23 (grid-12-dark.html, direção 01).
   Referência visual: UI de slicer (Bambu Studio / Orca / Prusa) — grafite
   azulado, grid de mesa de impressão, teal de estado ativo, mono em rótulo
   e número.

   ARQUITETURA EM 2 CAMADAS
     1. Primitivas  — a paleta crua. Nunca use direto numa página.
     2. Semânticas  — o que a coisa SIGNIFICA (fundo, tinta, ação, positivo).
                      É isso que as páginas consomem.
   Trocar a marca = reapontar a camada 2. As páginas não mudam.

   NÃO EXISTE CAMADA DE COMPONENTE AQUI ainda — e isso é deliberado. Com uma
   página só no ar, abstrair componente é chute. Quando o segundo produto da
   esteira existir, o que se repetir de verdade vira components.css.
   ═════════════════════════════════════════════════════════════════════════ */

:root{

  /* ─────────────────────────────────────────── 1. PRIMITIVAS ───────────── */

  /* grafite azulado — a superfície */
  --p-graphite-950:#0b0e12;
  --p-graphite-900:#0e1116;
  --p-graphite-800:#161b22;
  --p-graphite-700:#1d242d;
  --p-graphite-600:#252e39;
  --p-graphite-500:#2a333d;
  --p-graphite-400:#3a4653;

  /* tinta */
  --p-ice-050:#e6edf3;
  --p-ice-200:#aebac6;
  --p-ice-400:#8b97a4;

  /* teal — estado ativo */
  --p-teal-300:#4fd8c2;
  --p-teal-400:#00c2a8;
  --p-teal-600:#046b5d;
  --p-teal-900:#04231f;
  --p-teal-950:#10251f;

  /* verde — positivo, confirmação, garantia */
  --p-green-400:#4ade80;
  --p-green-900:#12211a;
  --p-green-700:#265039;

  /* âmbar — marcador de produção. NUNCA é cor de marca:
     só sinaliza material que não pode ir ao ar. */
  --p-amber-400:#ffb454;
  --p-amber-900:#241a09;
  --p-amber-700:#4d3a14;


  /* ─────────────────────────────────────────── 2. SEMÂNTICAS ───────────── */

  /* superfícies */
  --bg:              var(--p-graphite-900);
  --bg-alt:          var(--p-graphite-950);   /* faixa alternada de seção */
  --surface:         var(--p-graphite-800);   /* card, painel */
  --surface-2:       var(--p-graphite-700);   /* chip, campo, linha de total */
  --surface-3:       var(--p-graphite-600);
  --line:            var(--p-graphite-500);
  --line-strong:     var(--p-graphite-400);

  /* tinta */
  --ink:             var(--p-ice-050);        /* títulos, ênfase */
  --ink-2:           var(--p-ice-200);        /* corpo — 9.58:1 sobre --bg */
  --ink-3:           var(--p-ice-400);        /* apoio — 6.36:1 sobre --bg */

  /* ação */
  --brand:           var(--p-teal-400);
  --brand-ink:       var(--p-teal-900);       /* texto SOBRE o acento — 7.34:1 */
  --brand-dim:       var(--p-teal-300);
  --brand-soft:      var(--p-teal-950);
  --brand-line:      var(--p-teal-600);

  /* positivo */
  --ok:              var(--p-green-400);
  --ok-soft:         var(--p-green-900);
  --ok-line:         var(--p-green-700);

  /* marcador de produção (não publicar) */
  --warn:            var(--p-amber-400);
  --warn-soft:       var(--p-amber-900);
  --warn-line:       var(--p-amber-700);


  /* ─────────────────────────────────────────── 3. TIPOGRAFIA ───────────── */

  /* Produção: trocar por Inter (sans) e JetBrains Mono (mono) via @font-face.
     Enquanto não houver webfont, os stacks abaixo seguram o desenho. */
  --font-sans:"Inter","Segoe UI",-apple-system,system-ui,sans-serif;
  --font-mono:"JetBrains Mono",Consolas,"Cascadia Mono",ui-monospace,monospace;

  /* escala fluida — mobile → desktop sem breakpoint */
  --text-xs:   0.8125rem;                       /* 13px  · nota, legenda     */
  --text-sm:   0.9063rem;                       /* 14.5px· rótulo, tabela    */
  --text-base: clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);   /* 17→18 · corpo  */
  --text-lg:   clamp(1.0938rem, 0.9vw + 0.94rem, 1.25rem); /* deck, lede     */
  --text-xl:   clamp(1.1875rem, 1.3vw + 1rem, 1.4375rem);  /* h3, cross-head */
  --text-2xl:  clamp(1.4375rem, 2.2vw + 1rem, 1.875rem);   /* h2             */
  --text-3xl:  clamp(1.75rem, 4.6vw + 0.6rem, 2.625rem);   /* h1 do hero     */
  --text-price:clamp(3rem, 9vw + 0.5rem, 4.125rem);        /* R$ 67          */

  --lh-tight:1.16;
  --lh-snug:1.32;
  --lh-body:1.62;

  --tracking-display:-0.015em;
  --tracking-label:0.09em;      /* rótulo mono em caixa alta */
  --tracking-btn:0.06em;

  --weight-body:400;
  --weight-strong:700;
  --weight-display:700;
  --weight-btn:800;


  /* ─────────────────────────────────────────── 4. ESPAÇO ───────────────── */

  --space-1:0.25rem;   /*  4px */
  --space-2:0.5rem;    /*  8px */
  --space-3:0.75rem;   /* 12px */
  --space-4:1rem;      /* 16px */
  --space-5:1.375rem;  /* 22px */
  --space-6:1.875rem;  /* 30px */
  --space-7:2.75rem;   /* 44px */
  --space-8:4rem;      /* 64px */
  --space-9:5.5rem;    /* 88px */

  --section-y:var(--space-7);     /* respiro vertical de seção no mobile   */
  --section-y-lg:var(--space-8);  /* … e a partir de 720px                 */


  /* ─────────────────────────────────────────── 5. FORMA ───────────────── */

  --radius-sm:4px;
  --radius:6px;         /* padrão do sistema — painel de slicer            */
  --radius-lg:14px;     /* painel de destaque (preço) — 2026-07-29         */
  --radius-pill:5px;    /* "pill" no Slicer é quase reto, de propósito     */

  --border:1px solid var(--line);
  --border-strong:1px solid var(--line-strong);

  /* No dark, sombra não existe: o que separa plano é BORDA e GLOW. */
  --glow-brand:0 0 0 1px rgba(0,194,168,.35), 0 8px 26px -12px rgba(0,194,168,.55);
  --glow-panel:0 10px 30px -18px rgba(0,0,0,.9);

  /* textura: grid da mesa de impressão */
  --grid-line:rgba(255,255,255,.028);
  --grid-size:26px;
  --texture-bed:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);


  /* ─────────────────────────────────────────── 6. LAYOUT ──────────────── */

  --measure:66ch;       /* largura máxima de linha para leitura confortável
                           (62→66ch em 2026-07-29, pedido do dono: página
                           menos "espremida" no desktop) */
  --wrap:860px;         /* coluna de conteúdo da página de vendas
                           (660→860px em 2026-07-29 — cards, grids e preço
                           ocupam a coluna cheia; o texto segue no --measure) */
  --gutter:22px;
  --gutter-lg:28px;


  /* ─────────────────────────────────────────── 7. MOVIMENTO ───────────── */

  --ease:cubic-bezier(.2,.6,.3,1);
  --dur-fast:120ms;
  --dur:180ms;
}

/* Respeita quem pediu menos movimento. Regra do sistema, não da página. */
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur:0ms}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media (min-width:720px){
  :root{--section-y:var(--section-y-lg);--gutter:var(--gutter-lg)}
}