/* ============================================================
   Design System — Vinícius Nunes / Advogado Sustentável
   01 · Design Tokens (base — NÃO editar por página)

   Identidade: Curso Advogado Sustentável · tema CLARO
   Fontes:     Sora (headings) + Manrope (body) — Google Fonts
   Origem:     wireframes aprovados (-v3/-v4) + _source/1-background/05-design-system.md
   ============================================================ */

/* Fontes locais (variáveis). ATIVAR após o Step 0.5 gerar os WOFF2 a partir de
   fonts/*.ttf — e então remover o <link> Google Fonts do 04-layout.html. Até lá,
   o layout serve Sora+Manrope via CDN e estas regras ficam comentadas p/ evitar 404.
@font-face { font-family: 'Sora';    src: url("/assets/tenants/vinicius_nunes/Sora-variable-888df451.woff2")    format('woff2-variations'); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url("/assets/tenants/vinicius_nunes/Manrope-variable-cdb8c80c.woff2") format('woff2-variations'); font-weight: 200 800; font-style: normal; font-display: swap; }
*/

:root {
  /* ---- Cores · marca (accent dourado) ---- */
  --c-gold:       #CC9A56;   /* accent primário — CTAs, ícones SVG, ênfase */
  --c-gold-dk:    #B18955;   /* hover / variante escura / sombra do dourado */

  /* ---- Cores · neutros escuros (seções dark) ---- */
  --c-black:      #060606;   /* dark principal */
  --c-black-2:    #121212;
  --c-black-3:    #1C1C1C;

  /* ---- Cores · neutros claros ---- */
  --c-white:      #FFFFFF;
  --c-cream:      #FAF9F5;   /* off-white alternativo */
  --c-bg:         #FFFFFF;   /* fundo padrão das páginas (tema claro) */
  --c-border:     #E8E8E2;

  /* ---- Cores · texto ---- */
  --c-text:       #111111;   /* títulos / texto forte */
  --c-body:       #3D3D3D;   /* corpo de texto */
  --c-muted:      #767676;   /* secundário / metadados */

  /* ---- Cores · accents secundários (uso decorativo pontual) ---- */
  --c-blue:       #6EC1E4;
  --c-terracotta: #D97757;
  --c-no:         #C0524A;   /* "não pode" / negativo — compliance grid, pn-table */

  /* ---- Tipografia ---- */
  --f-head: 'Sora', sans-serif;     /* H1–H3 · peso 600 · text-transform none */
  --f-sans: 'Manrope', sans-serif;  /* corpo 400 · meta 600–800 · eyebrows 800 uppercase */

  /* ---- Raios ---- */
  --r-sm: 5px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* ---- Sombras (valores reais em uso nos wireframes) ---- */
  --sh-sm:   0 4px 16px rgba(0, 0, 0, .07);    /* cards sobre fundo claro */
  --sh-gold: 0 4px 14px rgba(204, 154, 86, .12);
  --sh-lg:   0 24px 56px rgba(0, 0, 0, .55);   /* elementos sobre fundo escuro */

  /* ---- Espaçamento (escala do 05-design-system.md) ---- */
  --space-20: 10px;
  --space-30: 20px;
  --space-40: 30px;
  --space-50: clamp(30px, 5vw, 50px);
  --space-60: clamp(30px, 7vw, 70px);
  --space-70: clamp(50px, 7vw, 90px);   /* padding de seção desktop ~70–90 / mobile ~50 */
  --space-80: clamp(70px, 10vw, 140px);

  /* ---- Corpo de texto (defaults do wireframe) ---- */
  --body-size:       16px;
  --body-line:       1.4;
  --body-tracking:   -0.1px;

  /* ============================================================
     Aliases legados — vocabulário dos wireframes -v1 (artigos).
     Mantidos para a extração dos componentes -v1 não quebrar.
     Em CSS novo, preferir os tokens --c-* / --f-* acima.
     ============================================================ */
  --gold:         var(--c-gold);
  --gold-dark:    var(--c-gold-dk);
  --gold-rgb:     204, 154, 86;
  --black:        var(--c-black);
  --black-2:      var(--c-black-3);
  --white:        var(--c-white);
  --cream:        var(--c-cream);
  --bg:           var(--c-bg);
  --border:       var(--c-border);
  --text:         var(--c-text);
  --body:         var(--c-body);
  --muted:        var(--c-muted);
  --no:           var(--c-no);
  --font:         var(--f-sans);
  --font-heading: var(--f-head);
  --r:            6px;   /* chrome padronizado — 6px exato do wireframe/mockup */
}