/* ==========================================================================
   TOKENS — Design System SIMEDUC 10 ANOS
   Única fonte de verdade de cores, fontes, espaçamentos, raios e sombras.
   Veja docs/DESIGN-SYSTEM.md
   ========================================================================== */

/* ---------- Fontes locais (woff2, font-display: swap p/ performance) ---------- */
@font-face {
  font-family: "Open Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans";
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/open-sans-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Nexa";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/nexa-bold.woff2") format("woff2");
}

:root {
  /* ---------- Cores da marca ---------- */
  --plum: #3d0d3d;        /* principal */
  --coral: #cb7169;       /* contraste */
  --cream: #f6f1f1;       /* secundária */
  --sage: #8baa97;        /* contraste */
  --grey: #8c8c8c;        /* secundária */
  --amber: #e6ac54;       /* contraste */

  /* Derivadas (mesmas matizes, para profundidade) */
  --plum-900: #2a082a;
  --plum-700: #521a52;
  --plum-500: #6b2d6b;
  --coral-600: #b85d55;
  --amber-600: #cf9440;
  --cream-200: #ebe3e3;
  --ink: #2b1a2b;         /* texto sobre fundo claro */

  /* Papéis semânticos */
  --bg: var(--cream);
  --bg-dark: var(--plum);
  --text: var(--ink);
  --text-soft: #5c4a5c;
  --text-on-dark: var(--cream);
  --accent: var(--coral);
  --accent-2: var(--amber);
  --detail: var(--sage);

  /* ---------- Tipografia ---------- */
  --font-title: "Open Sans", system-ui, sans-serif;     /* títulos */
  --font-sub: "Nexa", "Open Sans", system-ui, sans-serif; /* subtítulos */
  --font-body: "Open Sans", system-ui, sans-serif;      /* parágrafo, menu, rodapé */

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-h2: clamp(1.9rem, 1.3rem + 3vw, 3.5rem);
  --fs-h1: clamp(2.2rem, 1.3rem + 3.6vw, 4.5rem);

  /* ---------- Espaçamento (escala de 4px / 8px) ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(4rem, 3rem + 6vw, 8rem);
  --gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);
  --container: 76rem;

  /* ---------- Forma ---------- */
  --radius-sm: 0.5rem;
  --radius: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgb(61 13 61 / 0.1);
  --shadow: 0 12px 32px -8px rgb(61 13 61 / 0.25);
  --shadow-lg: 0 28px 60px -16px rgb(42 8 42 / 0.45);

  /* ---------- Movimento ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t: 320ms;

  --header-h: 4.5rem;
}