/* ============================================================
   COMUNIDADE VIVA — Design Tokens v1.0
   Extracted from the official design-system spec (saalve-site.pdf).
   Brand: Comunidade Viva (org: Saalve). Language: PT-BR.
   "A linguagem visual de uma comunidade que constrói o futuro
    com as próprias mãos — cores quentes, tipografia forte e
    calor humano."
   ============================================================ */

/* Fonts are the spec's Google-Fonts equivalents (identified
   visually): Oswald (display) + Inter (body). Load via:
   https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap */

:root{
  /* ---- Terracota — PRIMARY ---- */
  --terra-900:#913B19;  /* pressed                       */
  --terra-800:#AE471E;  /* hover                         */
  --terra-600:#CA5223;  /* ★ base / primary              */
  --terra-300:#E2A086;  /* light / disabled              */
  --terra-100:#F8E7E0;  /* tint / badge                  */
  --terra-50:#FCF5F2;   /* washed / soft background      */

  /* ---- Azul — SECONDARY / ACCENT ---- */
  --blue-700:#1E5C91;   /* dark / hover                  */
  --blue-500:#2570B1;   /* ★ base / accent / links       */
  --blue-200:#ACC9E1;   /* logo on dark                  */
  --blue-50:#EEF4F9;    /* tint / info background        */

  /* ---- Âmbar — TERTIARY / SUPPORT ---- */
  --amber-600:#B18B58;  /* dark                          */
  --amber-400:#D3A569;  /* ★ "Apoie" button, kickers     */
  --amber-100:#F5EBDE;  /* tint                          */

  /* ---- Warm neutrals ---- */
  --ink-900:#2C2019;    /* titles, footer, dark surface  */
  --ink-800:#413630;    /* subtitles                     */
  --text-700:#5A514C;   /* body copy                     */
  --muted-500:#8B8480;  /* secondary text                */
  --border-200:#E1E0DF; /* borders, dividers             */
  --areia:#FAF9F8;      /* section background ("sand")    */
  --surface:#FFFFFF;    /* cards                         */

  /* ---- Semantic ---- */
  --success:#2E7D52;
  --warning:#B98A2E;
  --danger:#C0392B;
  --info:#2570B1;       /* = azul                        */

  /* ---- Typography ---- */
  --font-display:'Oswald','Archivo Narrow',sans-serif;
  --font-body:'Inter',system-ui,sans-serif;

  /* ---- Spacing (base 4px) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-20:80px;
  --space-24:96px; --space-32:128px;

  /* ---- Radius ---- */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:24px; --radius-pill:999px;

  /* ---- Elevation — warm-ink shadows (not pure grey) ---- */
  --shadow-sm:0 1px 2px rgba(44,32,25,.06),0 1px 3px rgba(44,32,25,.08);
  --shadow-md:0 4px 12px rgba(44,32,25,.08),0 2px 4px rgba(44,32,25,.06);
  --shadow-lg:0 12px 28px rgba(44,32,25,.12),0 4px 10px rgba(44,32,25,.08);
  --shadow-xl:0 24px 60px rgba(44,32,25,.16);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --dur-fast:150ms; --dur:240ms; --dur-slow:400ms;

  /* ---- Layout ---- */
  --container:1200px;
  --focus-ring:0 0 0 3px rgba(202,82,35,.15);
}

/* ============================================================
   SEMANTIC TYPE — apply these classes/selectors directly.
   Titles always use the display font in UPPERCASE.
   ============================================================ */

.cv-kicker{
  font-family:var(--font-display);
  font-weight:600; font-size:12.5px; line-height:1;
  letter-spacing:2.5px; text-transform:uppercase;
}
.cv-display{
  font-family:var(--font-display);
  font-weight:700; font-size:56px; line-height:1.02;
  letter-spacing:.3px; text-transform:uppercase;
}
.cv-h1{
  font-family:var(--font-display);
  font-weight:700; font-size:42px; line-height:1.05;
  letter-spacing:.3px; text-transform:uppercase;
}
.cv-h2{
  font-family:var(--font-display);
  font-weight:700; font-size:32px; line-height:1.08;
  letter-spacing:.3px; text-transform:uppercase;
}
.cv-h3{
  font-family:var(--font-display);
  font-weight:600; font-size:23px; line-height:1.12;
  letter-spacing:.3px; text-transform:uppercase;
}
.cv-h4{
  font-family:var(--font-display);
  font-weight:600; font-size:18px; line-height:1.2;
}
.cv-body-lg{
  font-family:var(--font-body);
  font-weight:400; font-size:18px; line-height:1.6;
}
.cv-body{
  font-family:var(--font-body);
  font-weight:400; font-size:16px; line-height:1.65;
}
.cv-body-sm{
  font-family:var(--font-body);
  font-weight:400; font-size:14px; line-height:1.5;
}
.cv-caption{
  font-family:var(--font-body);
  font-weight:500; font-size:12.5px; line-height:1.4;
}

/* Bicolor section title helper: second line in accent colour */
.cv-accent-terra{ color:var(--terra-600); }
.cv-accent-blue{ color:var(--blue-500); }