/* =============================================================
   Design Tokens — Claudia Gindre
   Sistema tipográfico fluido, paleta refinada, espaçamento modular
   ============================================================= */

:root {
  /* — Cores primárias (teal refinada, mais profunda) — */
  --teal-950: #0A3A43;
  --teal-900: #0F4F5A;
  --teal-800: #145E6B;
  --teal-700: #1E7A87;
  --teal-600: #2E8F9A;
  --teal-500: #4FA8B0;
  --teal-400: #7FC0C4;
  --teal-300: #A8CFD3;
  --teal-200: #CDE2E4;
  --teal-100: #E6F0F1;
  --teal-50:  #F3F8F9;

  /* — Dourado envelhecido, mais saturado para atender WCAG — */
  --gold-800: #6A5620;
  --gold-700: #85692A;
  --gold-600: #9A7F32;
  --gold-500: #B08C3E;
  --gold-400: #C3A45B;
  --gold-300: #D7BD82;
  --gold-200: #E8D5A9;
  --gold-100: #F4E9CE;
  --gold-50:  #FAF4E4;

  /* — Neutros creme (papel) — */
  --cream-50:  #FBF8F2;
  --cream-100: #F4EEE1;
  --cream-200: #E8DFCB;
  --cream-300: #D8CCB3;

  /* — Escala de tinta — */
  --ink-950: #0A0E14;
  --ink-900: #121921;
  --ink-800: #1C2530;
  --ink-700: #2A3440;
  --ink-600: #445062;
  --ink-500: #6A7585;
  --ink-400: #99A3B1;
  --ink-300: #C4CBD4;
  --ink-200: #E1E5EA;
  --ink-100: #F2F4F7;
  --white:   #FFFFFF;

  /* — Cores semânticas — */
  --color-bg:            var(--cream-50);
  --color-bg-alt:        var(--cream-100);
  --color-surface:       var(--white);
  --color-surface-alt:   var(--cream-100);
  --color-text:          var(--ink-800);
  --color-text-muted:    var(--ink-600);
  --color-text-subtle:   var(--ink-500);
  --color-heading:       var(--teal-900);
  --color-primary:       var(--teal-800);
  --color-primary-hover: var(--teal-900);
  --color-accent:        var(--gold-600);
  --color-accent-hover:  var(--gold-700);
  --color-accent-soft:   var(--gold-500);
  --color-border:        var(--ink-200);
  --color-border-strong: var(--ink-300);
  --color-focus:         var(--teal-600);

  /* — Famílias tipográficas — */
  --font-serif:   "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-script:  "Parisienne", "Dancing Script", cursive;

  /* — Escala tipográfica fluida (maior progressão, contraste editorial) — */
  --fs-2xs:  0.8125rem;
  --fs-xs:   0.875rem;
  --fs-sm:   1rem;
  --fs-base: 1.125rem;
  --fs-md:   1.25rem;
  --fs-lg:   clamp(1.3125rem, 0.95rem + 0.95vw, 1.5625rem);
  --fs-xl:   clamp(1.6875rem, 1.15rem + 1.4vw, 2.1875rem);
  --fs-2xl:  clamp(2.125rem, 1.4rem + 2.6vw, 3.25rem);
  --fs-3xl:  clamp(2.5rem, 1.5rem + 3.8vw, 4.25rem);
  --fs-4xl:  clamp(2.75rem, 1.7rem + 5.2vw, 5.5rem);
  --fs-display: clamp(3rem, 1.8rem + 6.4vw, 6.5rem);

  /* — Alturas de linha (ritmo vertical) — */
  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.65;
  --lh-loose: 1.8;

  /* — Letter-spacing — */
  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.14em;

  /* — Pesos — */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* — Espaçamento (escala modular) — */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4.5rem;
  --space-9:  6rem;
  --space-10: 8rem;
  --space-11: 12rem;

  /* — Raios — */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* — Sombras (tom teal para coesão) — */
  --shadow-xs: 0 1px 2px rgba(15, 79, 90, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 79, 90, 0.05), 0 1px 2px rgba(15, 79, 90, 0.04);
  --shadow-md: 0 6px 16px -2px rgba(15, 79, 90, 0.08), 0 2px 4px rgba(15, 79, 90, 0.04);
  --shadow-lg: 0 14px 32px -4px rgba(15, 79, 90, 0.12), 0 4px 10px rgba(15, 79, 90, 0.06);
  --shadow-xl: 0 28px 60px -8px rgba(15, 79, 90, 0.18), 0 8px 16px rgba(15, 79, 90, 0.08);
  --shadow-2xl: 0 40px 80px -12px rgba(15, 79, 90, 0.22);

  /* — Containers — */
  --container-xs: 520px;
  --container-sm: 680px;
  --container-md: 840px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --container-2xl: 1360px;

  /* — Measure (comprimento ideal de leitura) — */
  --measure-narrow: 52ch;
  --measure-base:   68ch;
  --measure-wide:   78ch;

  /* — Motion — */
  --ease-out:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-expo:    cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast:     180ms;
  --dur-base:     320ms;
  --dur-slow:     560ms;
  --dur-slower:   880ms;

  /* — Z-index — */
  --z-sticky:   50;
  --z-header:   60;
  --z-menu:     70;
  --z-overlay:  80;
  --z-modal:    90;
  --z-toast:   100;

  /* — Header height (usada em layout) — */
  --header-h: 76px;
}