/* ============================================================
   IPRC — DESIGN TOKENS
   Instituto Professora Rosário Cabral
   ============================================================ */

:root {
  /* ---- Cor: núcleo da marca (extraído do logotipo real) ---- */
  --color-navy-950: #0b141d;
  --color-navy-900: #10202e;
  --color-navy-800: #16293b;
  --color-navy-700: #1e3650;
  --color-navy-600: #2a4a6b;
  --color-navy-500: #3d6288;

  --color-gold-700: #9a7414;
  --color-gold-600: #b98d1c;
  --color-gold-500: #c9a227; /* accent principal */
  --color-gold-400: #dab84f;
  --color-gold-300: #e8cd7d;
  --color-gold-100: #f7ecc9;

  --color-cream-100: #fbf9f4;
  --color-cream-200: #f4efe4;
  --color-cream-300: #ece3d2;

  --color-ink-900: #17191c;
  --color-ink-700: #3a3f45;
  --color-ink-500: #5b6470;
  --color-ink-300: #8b93a0;
  --color-ink-100: #d8dde3;

  --color-white: #ffffff;
  --color-success: #2f7a4b;
  --color-error: #b3261e;

  /* ---- Papéis semânticos (light, único tema — institucional) ---- */
  --bg-page: var(--color-cream-100);
  --bg-surface: var(--color-white);
  --bg-surface-alt: var(--color-cream-200);
  --bg-inverse: var(--color-navy-900);
  --bg-inverse-alt: var(--color-navy-800);

  --text-body: var(--color-ink-900);
  --text-muted: var(--color-ink-500);
  --text-inverse: var(--color-cream-100);
  --text-inverse-muted: #c3ccd6;
  --text-accent: var(--color-gold-700);

  --border-subtle: var(--color-ink-100);
  --border-inverse: rgba(255, 255, 255, 0.18);

  --focus-ring: #1c6fd6;

  /* ---- Tipografia ---- */
  --font-display: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-2xs: 0.75rem;   /* 12px */
  --fs-xs: 0.8125rem;  /* 13px */
  --fs-sm: 0.9375rem;  /* 15px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.25rem;    /* 20px */
  --fs-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);     /* 24–30 */
  --fs-2xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);  /* 30–40 */
  --fs-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.375rem); /* 36–54 */
  --fs-4xl: clamp(2.75rem, 2rem + 3.6vw, 4.5rem);     /* 44–72 */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  /* ---- Espaçamento (escala base 4px) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  /* ---- Grid / layout ---- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Forma ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow-sm: 0 1px 2px rgba(16, 32, 46, 0.08), 0 1px 1px rgba(16, 32, 46, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 32, 46, 0.10), 0 2px 6px rgba(16, 32, 46, 0.06);
  --shadow-lg: 0 20px 48px rgba(16, 32, 46, 0.16), 0 6px 16px rgba(16, 32, 46, 0.08);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Breakpoints (referência — usados em @media) ----
     320 / 375 / 768 / 1024 / 1440 */
}

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