/* ============================================================
   CURSOS ANDERSON LIMA — Foundations
   Paleta terrosa + tipografia manuscrita/humanista
   Carregue ANTES dos componentes. Fontes vêm do Google Fonts
   (Caveat + Nunito Sans). Veja README → "Fontes".
   ============================================================ */

/* Fontes via CDN. Para auto-hospedar, baixe os .woff2 e troque por @font-face. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,700;6..12,800&display=swap');

:root {
  /* ---------- COR · Base / superfícies ---------- */
  --paper:        #F4ECE0;  /* fundo principal — creme quente, cor de papel kraft claro */
  --paper-deep:   #EBDFCD;  /* fundo alternado / faixas */
  --surface:      #FBF6EE;  /* cartões e caixas */
  --surface-2:    #FFFFFF;  /* superfície elevada / campos */

  /* ---------- COR · Tinta / texto ---------- */
  --ink:          #3A2E25;  /* texto principal — espresso quente */
  --ink-soft:     #6B584A;  /* texto secundário */
  --ink-faint:    #9C8A7A;  /* legendas, placeholders */

  /* ---------- COR · Primária (terracota) ---------- */
  --clay-50:      #FBEFE6;
  --clay-100:     #F3DCC9;
  --clay-300:     #D89E72;
  --terracotta:   #A8633C;  /* PRIMÁRIA — botões, links, marca */
  --terracotta-700: #8A4F2E;/* hover / pressionado */
  --terracotta-900: #6E3E24;/* texto sobre claro, ênfase */

  /* ---------- COR · Apoio (argila + marrom + azul suave) ---------- */
  --clay:         #C98A5E;  /* argila clara — destaques calorosos */
  --walnut:       #7C5A3E;  /* marrom nogueira — texto sobre claro, traços */
  --sky:          #9DB0BE;  /* azul-poeira (do retrato) — acento frio sutil */
  --sky-soft:     #DCE5EA;  /* fundo do acento frio */

  /* ---------- COR · Linhas ---------- */
  --line:         #E3D5C4;  /* bordas suaves */
  --line-strong:  #CDB99F;  /* bordas com mais presença */

  /* ---------- COR · Semânticas ---------- */
  --success:      #6E8B5B;  /* verde-sálvia suave */
  --warning:      #C98A3C;  /* âmbar */
  --danger:       #B4543E;  /* terracota avermelhada */

  /* ---------- TIPOGRAFIA · Famílias ---------- */
  --font-script: 'Caveat', 'Segoe Print', cursive;            /* manuscrita: logo, kickers, destaques */
  --font-sans:   'Nunito Sans', system-ui, -apple-system, sans-serif; /* texto e UI */

  /* ---------- TIPOGRAFIA · Pesos ---------- */
  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* ---------- ESPAÇO · escala (base 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---------- RAIO ---------- */
  --r-sm: 8px;
  --r-md: 14px;   /* padrão de cartões/botões */
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---------- SOMBRA (quentes, baixas, suaves) ---------- */
  --shadow-sm: 0 1px 2px rgba(58,46,37,0.06), 0 1px 3px rgba(58,46,37,0.05);
  --shadow-md: 0 4px 10px rgba(58,46,37,0.08), 0 2px 4px rgba(58,46,37,0.05);
  --shadow-lg: 0 16px 40px rgba(58,46,37,0.12), 0 4px 12px rgba(58,46,37,0.06);

  /* ---------- MOVIMENTO ---------- */
  --ease: cubic-bezier(0.33, 0.0, 0.2, 1);
  --dur: 200ms;
}

/* ============================================================
   ESTILOS SEMÂNTICOS — aplique direto nas tags
   ============================================================ */

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Logo / assinatura manuscrita */
.brand-script {
  font-family: var(--font-script);
  font-weight: var(--w-bold);
  color: var(--terracotta);
  line-height: 0.95;
}

/* Kicker manuscrito (sobrescrita acima de títulos) */
.kicker {
  font-family: var(--font-script);
  font-weight: var(--w-semibold);
  color: var(--terracotta);
  font-size: 1.5rem;
  line-height: 1;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-extrabold);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: 1.3rem;
  line-height: 1.25;
  color: var(--ink);
}

p, .body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

small, .caption {
  font-size: 0.875rem;
  color: var(--ink-faint);
}

.overline {
  font-size: 0.75rem;
  font-weight: var(--w-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-700);
}

a {
  color: var(--terracotta-700);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--terracotta); }