/* ============================================================
   variables.css — Design System (tokens da marca The Scole)
   Centraliza cores, tipografia, espaçamento e transições.
   ============================================================ */

:root {
  /* ---- Paleta oficial The Scole -------------------------- */
  --light-red: #bb0b1e;   /* Light Red — 1797C            */
  --st-george: #900615;   /* St. George Red — 1807C       */
  --dusk: #6c3054;        /* Dusk Purple — 5135C          */
  --dark-purple: #531e41; /* Dark Purple — 511C (base)    */
  --light-fog: #babcbf;   /* Light Fog — Cool Gray 3C     */
  --dark-fog: #464748;    /* Dark Fog — Cool Gray 9C      */
  --cream: #f5ebd8;       /* Pergaminho / texto principal */

  /* Tom auxiliar derivado (usado na seção "Método") */
  --dark-purple-deep: #3e1631;

  /* ---- Cores semânticas ---------------------------------- */
  --bg-base: var(--dark-purple);
  --text: var(--cream);
  --text-muted: rgba(245, 235, 216, 0.82);
  --text-soft: rgba(245, 235, 216, 0.6);

  --border-faint: rgba(245, 235, 216, 0.22);
  --border-soft: rgba(245, 235, 216, 0.28);
  --border-mid: rgba(245, 235, 216, 0.35);
  --border-strong: rgba(245, 235, 216, 0.6);

  --surface-card: rgba(83, 30, 65, 0.5);
  --surface-card-hover: rgba(83, 30, 65, 0.75);
  --surface-tint: rgba(245, 235, 216, 0.06);
  --header-scrolled: rgba(83, 30, 65, 0.92);

  /* ---- Tipografia ---------------------------------------- */
  /* Georgia + Lucida Bright são as fontes da marca.          */
  --font-serif: Georgia, "Lucida Bright", "Times New Roman", serif;

  --fs-hero: clamp(2.6rem, 6vw, 4.8rem);
  --fs-h2: clamp(2rem, 4vw, 3rem);
  --fs-lead: 1.1rem;
  --fs-body: 1rem;
  --fs-small: 0.92rem;
  --fs-kicker: 0.72rem;
  --fs-eyebrow: 0.66rem;

  --lh-base: 1.8;
  --lh-tight: 1.2;

  --ls-kicker: 0.4em;
  --ls-nav: 0.18em;
  --ls-btn: 0.16em;

  /* ---- Espaçamento --------------------------------------- */
  --space-section: 140px;
  --space-section-sm: 90px;
  --gutter: 24px;
  --gutter-lg: 56px;

  --maxw-wide: 1140px;
  --maxw: 1020px;
  --maxw-narrow: 720px;

  /* ---- Bordas / formas ----------------------------------- */
  --radius: 1px; /* cantos quase retos: estética clássica */

  /* ---- Transições / camadas ------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.3s;
  --t-mid: 0.4s;
  --t-slow: 1s;

  --z-header: 50;
  --z-skip: 100;

  /* Fleuron decorativo reutilizado em kickers e divisores */
  --fleuron: "\2767";
}