/* =========================================================================
   Yasmin Barbosa Studio de Dança — design tokens
   Extraídos das 9 artes oficiais (docs/01 §5). Toda cor/espaço/fonte do site
   vem daqui. Para trocar a identidade, mexa SÓ neste arquivo.
   ========================================================================= */
:root {
  /* ---------- Cor: primitivos da marca ---------- */
  --yb-blush-50:  #FDF6F3;   /* fundo mais claro (cards, formulário) */
  --yb-blush-100: #FBEFEA;   /* fundo padrão das artes */
  --yb-blush-200: #F9E4DE;   /* fundo alternado / degradê */
  --yb-blush-300: #F4D3D2;   /* bordas, divisores */
  --yb-rose-200:  #F7D2D6;   /* pílulas, corações */
  --yb-rose-300:  #F4B8C0;   /* acentos leves, sombra rosada */
  --yb-rose-500:  #D07A88;   /* hover suave, ornamentos */
  --yb-rose-700:  #B9505E;   /* ROSÉ DA MARCA — monograma, títulos, CTA */
  --yb-rose-800:  #A13D4C;   /* ênfase, degradê de título, CTA hover */
  --yb-rose-900:  #7E2E3B;   /* CTA active, texto sobre rosa claro */
  --yb-ink-900:   #3F3A3A;   /* grafite quente — texto principal */
  --yb-ink-700:   #5E5757;   /* texto secundário */
  --yb-ink-600:   #6B6363;   /* texto auxiliar (5.2:1 sobre blush, AA) */
  --yb-ink-500:   #8A8282;   /* só placeholders de input e decorativo (3.3:1 — NÃO usar em texto) */
  --yb-white:     #FFFDFC;

  /* ---------- Cor: semânticos ---------- */
  --color-bg:            var(--yb-blush-100);
  --color-bg-alt:        var(--yb-blush-200);
  --color-surface:       var(--yb-white);
  --color-surface-soft:  var(--yb-blush-50);
  --color-border:        var(--yb-blush-300);
  --color-text:          var(--yb-ink-900);
  --color-text-muted:    var(--yb-ink-700);
  --color-text-faint:    var(--yb-ink-600);
  --color-brand:         var(--yb-rose-700);   /* superfícies: botão, ícones, ornamentos, linhas */
  --color-brand-text:    var(--yb-rose-800);   /* TEXTO pequeno em rosé (eyebrow, script, rótulos): 5.7:1 AA */
  --color-brand-strong:  var(--yb-rose-800);
  --color-brand-deep:    var(--yb-rose-900);
  --color-brand-soft:    var(--yb-rose-300);
  --color-brand-tint:    var(--yb-rose-200);
  --color-focus:         #8E3B49;
  --color-error:         #B3261E;
  --color-error-bg:      #FDECEA;
  --color-success:       #2F6B4F;
  --color-success-bg:    #E8F3EC;
  --color-whatsapp:      #25D366;
  --color-on-brand:      #FFFFFF;
  /* Contraste medido (WCAG 2.x, 21/08/2026):
     ink-900/blush = 10.9:1 · ink-700/blush = 6.3:1 · ink-600/blush = 5.2:1 · ink-600/blush-200 = 4.8:1
     rose-800 (brand-text)/blush = 5.7:1 · rose-800/blush-200 = 5.2:1 · branco/rose-700 (CTA) = 4.8:1
     rose-900/rose-200 (pílulas) = 6.5:1. rose-700 como TEXTO pequeno = 4.3:1 → reprova AA, por isso
     existe --color-brand-text; rose-700 fica para superfícies e texto grande (≥ 24px). */

  /* ---------- Tipografia ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-geo:     'Josefin Sans', 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Mulish', 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:  'Great Vibes', 'Brush Script MT', cursive;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.1875rem;
  --text-xl:   1.375rem;
  --text-2xl:  clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem);
  --text-3xl:  clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --text-4xl:  clamp(2.6rem, 1.6rem + 4.6vw, 4.6rem);   /* H1 */
  --text-script: clamp(1.9rem, 1.3rem + 2.2vw, 2.8rem);

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.65;
  --tracking-wide: 0.14em;
  --tracking-caps: 0.08em;

  /* ---------- Espaço (base 4) ---------- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;   --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;  --space-20: 5rem;  --space-24: 6rem;
  --section-y: clamp(3.5rem, 6vw, 6.5rem);

  /* ---------- Forma ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 30px rgba(185, 80, 94, 0.10);
  --shadow-card: 0 2px 10px rgba(63, 58, 58, 0.06), 0 12px 32px rgba(185, 80, 94, 0.08);
  --shadow-cta:  0 8px 24px rgba(161, 61, 76, 0.28);

  /* ---------- Layout ---------- */
  --container: 1160px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 68px;
  --header-h-compact: 58px;

  /* ---------- Movimento ---------- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: .18s;
  --dur-base: .3s;
  --dur-slow: .7s;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0s; --dur-base: 0s; --dur-slow: 0s; }
}