/* ============================================================
   Rastra Design Tokens — v1.0
   Importado pelo functions.php em todas as páginas.

   Estes valores devem corresponder 1:1 ao theme.json.
   Nunca alterar aqui sem actualizar também o theme.json.

   Regra de ouro para a equipa:
     Nunca uses hex directos no CSS dos componentes.
     Usa sempre var(--rastra-*). Isto permite swap centralizado.
   ============================================================ */

:root {
  /* ---------- Cor ---------- */
  --rastra-cream:           #FBF8F3;
  --rastra-cream-2:         #F4EFE6;
  --rastra-cream-3:         #ECE4D4;
  --rastra-hairline:        #E6DFD1;
  --rastra-ink:             #111111;
  --rastra-ink-2:           #3B3B3A;
  --rastra-teal-050:        #EAF2F1;
  --rastra-teal-100:        #D6E5E4;
  --rastra-teal-300:        #6DA9A7;
  --rastra-teal-500:        #0A817E;
  --rastra-teal-600:        #026A68;
  --rastra-teal-700:        #014F4D;
  --rastra-orange-100:      #FBE0D1;
  --rastra-orange-300:      #F58A5A;
  --rastra-orange-500:      #ED520F;
  --rastra-orange-600:      #C94409;
  --rastra-sage:            #C3D7BF;
  --rastra-red-100:         #F4D8D8;
  --rastra-red-500:         #B32121;

  /* Aliases semânticos */
  --rastra-bg-page:         var(--rastra-cream);
  --rastra-bg-card:         #FFFFFF;
  --rastra-text-primary:    var(--rastra-ink);
  --rastra-text-secondary:  var(--rastra-ink-2);
  --rastra-text-brand:      var(--rastra-teal-600);
  --rastra-border-default:  var(--rastra-hairline);
  --rastra-border-focus:    var(--rastra-teal-500);

  /* ---------- Tipografia ---------- */
  --rastra-font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --rastra-font-sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rastra-size-display-xl: 72px;
  --rastra-size-h1:         40px;
  --rastra-size-h2:         28px;
  --rastra-size-h3:         22px;
  --rastra-size-body:       15px;
  --rastra-size-body-sm:    13px;
  --rastra-size-subhead:    13px;

  --rastra-tracking-tight:    -0.01em;
  --rastra-tracking-body:     0.031em;
  --rastra-tracking-subhead:  0.08em;

  /* ---------- Espaçamento (grelha 8px) ---------- */
  --rastra-space-1:   4px;
  --rastra-space-2:   8px;
  --rastra-space-3:   12px;
  --rastra-space-4:   16px;
  --rastra-space-5:   20px;
  --rastra-space-6:   24px;
  --rastra-space-8:   32px;
  --rastra-space-10:  40px;
  --rastra-space-12:  48px;
  --rastra-space-16:  64px;
  --rastra-space-20:  80px;

  /* ---------- Radii ---------- */
  --rastra-radius-sm:   8px;
  --rastra-radius-md:   10px;
  --rastra-radius-lg:   12px;
  --rastra-radius-xl:   16px;
  --rastra-radius-pill: 999px;

  /* ---------- Sombras ---------- */
  --rastra-shadow-card:     0 1px 2px rgba(17, 17, 17, 0.04);
  --rastra-shadow-elevated: 0 2px 4px rgba(17, 17, 17, 0.06);

  /* ---------- Motion ---------- */
  --rastra-duration-fast: 120ms;
  --rastra-duration-base: 200ms;
  --rastra-easing-default: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------- Layout ---------- */
  --rastra-max-width:    1200px;
  --rastra-content-max:  720px;
  --rastra-touch-min:    44px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rastra-duration-fast: 0ms;
    --rastra-duration-base: 0ms;
  }
}