/* Design Tokens — Ana Carolina Moraes (brand ana-moraes)
 * Derivado de brand.json em 26/08/2026. Fonte da paleta: anacarolina/planejamento_marca/08_IDENTIDADE_VISUAL.md
 * Dark-first: charcoal é a base, lilás é acento (chapado — nunca gradiente, brilho ou glassmorphism).
 * Alterou o brand.json? Regere este arquivo (skill tokens-css) em vez de editar à mão.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  /* ===== PALETA (brand.json) ===== */
  --color-primary:        #232323;   /* background */
  --color-secondary:      #B3B3B3;   /* text_secondary */
  --color-accent:         #A78BFA;   /* accent — lilás, ≈5,8:1 sobre charcoal */
  --color-accent-2:       #C4B5FD;   /* accent_secondary — realce/hover, ≈8,5:1 */
  --color-accent-3:       #6D28D9;   /* accent_tertiary — sobre fundo claro, ≈7:1 */
  --color-neutral-dark:   #1A1A1A;   /* background_alt */
  --color-neutral-light:  #F2F2F2;   /* text */
  --color-card:           #333333;   /* card_bg */
  --color-card-alt:       #3D3D3D;   /* card_bg_alt */
  --color-code-bg:        #161616;   /* code_bg */
  --color-claro:          #E6E6E6;   /* fundo claro para seções alternadas */

  /* Aliases semânticos (os que os templates consomem) */
  --bg:                   var(--color-primary);
  --bg-alt:               var(--color-neutral-dark);
  --bg-dark:              var(--color-neutral-dark);
  --bg-claro:             var(--color-claro);
  --text:                 var(--color-neutral-light);
  --text-secondary:       var(--color-secondary);
  --text-inv:             var(--color-primary);
  --text-claro:           var(--color-primary);
  --text-claro-secondary: #4D4D4D;
  --accent:               var(--color-accent);
  --accent-hover:         var(--color-accent-2);
  --accent-sobre-claro:   var(--color-accent-3);
  --card-bg:              var(--color-card);
  --code-bg:              var(--color-code-bg);
  --cta:                  var(--color-accent);
  --cta-text:             var(--color-primary);
  --link:                 var(--color-accent);

  /* ===== TIPOGRAFIA ===== */
  --font-primary:   'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-secondary: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:      'JetBrains Mono', Consolas, 'Courier New', monospace;   /* overlines, rótulos de dados, código */

  --fs-h1: 46px;  --fw-h1: 700;  --lh-h1: 1.1;
  --fs-h2: 34px;  --fw-h2: 700;  --lh-h2: 1.15;
  --fs-h3: 22px;  --fw-h3: 600;
  --fs-body: 17px; --fw-body: 400; --lh-body: 1.6;
  --fs-caption: 14px;
  --fs-overline: 12px;

  /* ===== ESPAÇAMENTO (escala 4px) ===== */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* ===== BORDA / RADIUS (rigor de layout: cantos discretos) ===== */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px;

  /* ===== SOMBRAS (só para elementos flutuantes) ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 8px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 24px rgba(0,0,0,.35);

  /* ===== BREAKPOINTS ===== */
  --bp-mobile: 640px; --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1280px;
}

/* Aplicação default */
body {
  font-family: var(--font-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
}
h1 { font-family: var(--font-primary); font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); }
h2 { font-family: var(--font-primary); font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); }
h3 { font-family: var(--font-primary); font-size: var(--fs-h3); font-weight: var(--fw-h3); }
code, pre, .mono, .overline { font-family: var(--font-mono); }
.overline { font-size: var(--fs-overline); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.caption { font-size: var(--fs-caption); color: var(--text-secondary); }