/* ==========================================================================
   tokens.css — Design tokens da Dra. Paoline
   Variáveis CSS espelhando o tailwind.config para serem consumidas em:
   - style.css (refinos finos fora do Tailwind)
   - main.js  (GSAP precisa de valores brutos: easings, offsets, sombras)
   ========================================================================== */

:root {
  /* ---------- Cores ---------- */
  --color-ivory:     #F5F5F3;
  --color-cream:     #F9F9F7;
  --color-graphite:  #1A1A1A;
  --color-ink:       #0F0F0F;
  --color-champagne: #B8A88A;
  --color-mist:      #8B8B8B;
  --color-line:      #E4E2DC;

  /* Variantes alpha (usadas em overlays, glass do header, gradientes) */
  --ivory-rgb:    245 245 243;
  --graphite-rgb: 26 26 26;

  /* ---------- Tipografia ---------- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  --tracking-editorial: -0.025em;
  --tracking-label:      0.18em;

  /* ---------- Layout ---------- */
  --shell-max: 1440px;
  --shell-px-mobile:   1.5rem;   /* 24px */
  --shell-px-tablet:   2.5rem;   /* 40px */
  --shell-px-desktop:  4rem;     /* 64px */

  --section-py-mobile:   7rem;   /* 112px */
  --section-py-desktop: 12rem;   /* 192px */

  /* ---------- Easings (compartilhados com GSAP via getPropertyValue) ---------- */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);    /* aprox. expo.out */
  --ease-soft:      cubic-bezier(0.25, 0.1, 0.25, 1); /* "smooth" */
  --ease-power:     cubic-bezier(0.65, 0, 0.35, 1);   /* aprox. power3.inOut */

  /* ---------- Durações de referência ---------- */
  --dur-fast: 300ms;
  --dur-base: 600ms;
  --dur-slow: 1200ms;
  --dur-cinematic: 1800ms;

  /* ---------- Sombras premium ---------- */
  --shadow-card:        0 30px 60px -22px rgba(var(--graphite-rgb) / 0.18);
  --shadow-card-hover:  0 40px 80px -24px rgba(var(--graphite-rgb) / 0.28);
  --shadow-header:      0 1px 0 0 rgba(var(--graphite-rgb) / 0.04);

  /* ---------- Hero fan (lido no main.js) ---------- */
  --hero-fan-spread-mobile: 110px;
  --hero-fan-spread:        260px;
  --hero-fan-rotate:        14deg;
  --hero-fan-tilt:          6deg;

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-content: 10;
  --z-header:  50;
  --z-modal:   100;
}

/* ==========================================================================
   Aliases utilitários (usados como var(--...) em style.css)
   ========================================================================== */

:root {
  --ivory-glass:    rgba(var(--ivory-rgb) / 0.78);
  --line-soft:      rgba(var(--graphite-rgb) / 0.08);
  --line-medium:    rgba(var(--graphite-rgb) / 0.15);
  --line-strong:    rgba(var(--graphite-rgb) / 0.4);
  --text-muted:     rgba(var(--graphite-rgb) / 0.7);
  --text-faint:     rgba(var(--graphite-rgb) / 0.5);
}