/* ============================================================
   ARTEN — Design Tokens
   Fonte da verdade: /Users/fernandocrispim/ARTEN/tokens.css
   (Manual de Marca v1.0, jul/2026 · tokens.json é a fonte única)

   O BLOCO 1 é espelho literal do arquivo do sistema — não edite
   aqui, edite lá e recopie. O BLOCO 2 é o que o manual não cobre:
   nomeado na língua do sistema pra que site e design system
   parem de ser dois vocabulários.
   ============================================================ */

/* ============================================================
   BLOCO 1 · ESPELHO DO SISTEMA — verbatim do manual
   ============================================================ */
:root {
  /* ---- Cor · marca (§11) — a moldura, não o quadro ---- */
  --ink: #000000;      /* base: texto, logo, botão. ~30% */
  --paper: #ffffff;    /* superfície dominante. ~60% claro */
  --cru: #edeae2;      /* fundo alternativo, respiro */
  --camelo: #b68a5e;   /* ACENTO. Filete/borda/régua. NUNCA fundo, área ou texto (AA ~2.8:1) */

  /* ---- Cor · produto (§11) — veste o corpo, não a UI. Teto: 5 ---- */
  --product-creme: #d6cfc0;
  --product-marinho: #232b3d;
  --product-preto-la: #1a1a1a;
  --product-chumbo: #4a4a47;
  --product-verde-fechado: #2e3a32; /* RESERVADO — entra quando houver demanda */
  /* PENDENTE: --product-fem-* — extensão da linha feminina (grupo próprio; divergência
     do teto de 5 do manual v1.0, formalizar no v1.1). Valores virão das fotos das peças. */

  /* ---- Cor · semântica ---- */
  --surface: var(--paper);
  --surface-alt: var(--cru);
  --surface-inverse: var(--ink);  /* bloco preto de seção (ritmo híbrido) */
  --text: var(--ink);
  --text-inverse: var(--paper);
  --text-muted: #6b6660;          /* passa AA sobre paper e cru */
  --accent: var(--camelo);        /* só borda/filete/detalhe */
  --action: var(--ink);
  --action-inverse: var(--paper);

  /* ---- Tipografia (§10) ---- */
  /* Display: Instrument Serif = INTERINA (pendência §15; candidatas: Prata, Canela, Portrait) */
  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Inter", system-ui, sans-serif;

  --text-display-xl: clamp(3rem, 8vw, 7rem);     /* hero — um por página */
  --text-display: clamp(2.25rem, 5vw, 4.5rem);   /* título de seção — um por seção */
  --text-title: clamp(1.5rem, 3vw, 2.25rem);
  --text-subtitle: 1.125rem;                     /* sans medium, uma linha */
  --text-body: 1rem;
  --text-caption: 0.8125rem;                     /* ficha: composição, medidas, cuidado */
  --text-label: 0.75rem;                         /* rótulo caps de sistema */

  --leading-display: 1.05;
  --leading-title: 1.15;
  --leading-body: 1.5;                           /* manual: entrelinha 1.5 */

  --tracking-wordmark: 0.22em;                   /* exclusivo do wordmark ARTEN */
  --tracking-label: 0.18em;                      /* rótulos curtos caps */

  --weight-display: 400;                         /* serifa em peso regular */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;                            /* condimento: UMA palavra */

  /* ---- Espaço (base 8px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;                              /* respiro entre seções */

  /* ---- Dimensões ---- */
  --container: 82rem;                            /* max-width editorial */
  --measure: 65ch;                               /* largura máx. de texto corrido */

  /* ---- Borda ---- */
  --rule-camelo: 1.5px;                          /* o filete (§11) */
  --hairline: 1px;
  --radius: 0px;                                 /* cantos retos; sobriedade */
  --radius-pill: 999px;                          /* exceção única: pill WhatsApp */

  /* ---- Motion (§3: mínimo) ---- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-reveal: 600ms;
  --duration-hover: 300ms;
}

/* ============================================================
   BLOCO 2 · EXTENSÕES DO SITE — o manual é omisso aqui
   Cada uma existe porque a página precisa e o sistema não diz.
   Candidatas a subir pro manual v1.1.
   ============================================================ */
:root {
  /* ---- Cor ----
     O manual define o par secundário só sobre claro (--text-muted).
     As seções invertidas (hero, malha) precisam do equivalente sobre
     ink — mesma família quente, ~9:1 contra #000. */
  --text-muted-inverse: #b0aca6;
  --text-hint-inverse: #ffffff59;   /* dica decorativa, aria-hidden */

  /* O manual dá a espessura do hairline, não a cor. */
  --hairline-color: #00000014;
  --rule-hairline: var(--hairline) solid var(--hairline-color);

  /* Foco: o checklist §5 pede "outline sóbrio, NÃO camelo fino".
     Vira ink sobre claro e paper sobre escuro — 21:1 nos dois lados,
     bem acima dos 3:1 exigidos. O flip mora em base.css. */
  --focus-ring: var(--ink);

  /* ---- Tipografia ----
     Nome de peça na grade: entre --text-subtitle (fixo, fraco no desktop)
     e --text-title (grande demais pra card). Fluido, escala própria. */
  --text-card-title: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --tracking-display: -0.015em;   /* aperto ótico da serifa em corpo grande */

  /* ---- Dimensões ----
     Ritmo vertical e margem lateral fluidos. O manual fixa --space-32
     como respiro entre seções; aqui ele respira com a viewport, dentro
     do "muito ar" do checklist §1.3. */
  --section-y: clamp(4.5rem, 10vw, 10.5rem);
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  /* ---- Motion ----
     O manual fecha reveal (600ms) e hover (300ms). Falta o degrau curto
     de micro-estado (swatch, botão) e dois easings de matéria. */
  --duration-fast: 180ms;
  --ease-suave: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-tecido: cubic-bezier(0.33, 0.9, 0.2, 1);  /* peso de malha, sem elástico */

  /* ---- Camadas ---- */
  --layer-nav: 100;
  --layer-ficha: 200;

  /* ---- A Malha Viva ----
     O canvas lê estes valores em vez de carregar hex próprio, senão
     JS e CSS voltam a divergir na primeira troca de paleta. */
  --malha-fio: var(--paper);
  --malha-fundo: var(--ink);

  /* CONFLITO CONHECIDO — não é meu pra resolver.
     A ficha da peça (Ponto) usa vidro/blur. O checklist §2 manda painel
     CRU SÓLIDO, "nunca vidro/blur". Token mantido pra não quebrar a
     seção dele; sinalizado pro Fernando falar com o Ponto. */
  --vidro: saturate(140%) blur(18px);
}

/* ============================================================
   UTILITÁRIOS CANÔNICOS DO SISTEMA — verbatim do manual
   ============================================================ */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
}

.label-caps {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

.rule-camelo {
  border: 0;
  border-top: var(--rule-camelo) solid var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-reveal: 0ms;
    --duration-hover: 0ms;
    --duration-fast: 0ms;
  }
}