/* =====================================================================================
   Recanto dos Cosméticos — TOKENS do design system (16/11). Fonte única de cores, letras,
   espaços, raios, sombras e tempos de animação. Feminino, elegante e profissional.
   ===================================================================================== */
:root {
  /* cores */
  --c-bg: #FBF7F4;          /* fundo principal: off-white quente */
  --c-surface: #FFFFFF;     /* cards */
  --c-rose: #E8C4B8;        /* rosé nude: cor da marca */
  --c-rose-dark: #C9958A;   /* rosé escuro: hover e detalhes */
  --c-rose-soft: #F5E6E0;   /* rosé bem claro: fundos de apoio */
  --c-wine: #7A2E3A;        /* vinho: botões principais e destaques */
  --c-wine-dark: #63232E;
  --c-gold: #C8A46B;        /* dourado suave: selos e detalhes */
  --c-text: #2B2124;        /* texto principal */
  --c-text-2: #7A6B6E;      /* texto secundário */
  --c-line: #EFE4DF;
  --c-line-2: #E2D2CB;
  --c-ok: #2F7A4F;

  /* letras: 2 famílias */
  --f-title: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --f-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fs-base: 16px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-h1: clamp(40px, 10vw, 68px);
  --fs-h2: clamp(30px, 7vw, 44px);
  --fs-h3: 22px;

  /* espaços (escala de 4) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* raios */
  --r-card: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* sombras mínimas e difusas (nunca animadas) */
  --sh-1: 0 1px 2px rgba(43, 33, 36, .04), 0 8px 24px -12px rgba(43, 33, 36, .10);
  --sh-2: 0 24px 48px -24px rgba(122, 46, 58, .22);

  /* movimento: 200 a 600 ms, sempre ease-out */
  --t-fast: 200ms;
  --t-base: 320ms;
  --t-slow: 600ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);

  /* toque */
  --tap: 44px;
}