/* ═══════════════════════════════════════════════════
   tokens.css — ÚNICA fonte de variáveis CSS
   Instituto Mariana Menegardo
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Cores Brand ─── */
  --color-primary:       #C96868;
  --color-primary-hover: #B55858;
  --color-secondary:     #C47878;
  --color-accent-light:  #E8907F;
  --color-base-rose:     #F5B0A8;

  /* ─── Neutros ─── */
  --color-bg:            #FDFAF8;
  --color-bg-subtle:     #FAF3F0;
  --color-text:          #2A1A18;
  --color-text-muted:    #8C6E6A;
  --color-border:        #EDD8D4;
  --color-white:         #FFFFFF;

  /* ─── Semânticas ─── */
  --color-surface:       var(--color-white);
  --color-surface-alt:   var(--color-bg-subtle);
  --color-cta:           var(--color-primary);
  --color-cta-hover:     var(--color-primary-hover);
  --color-whatsapp:      #25D366;

  /* ─── Tipografia ─── */
  --font-display:  'Cormorant Garamond', serif;
  --font-body:     'DM Sans', sans-serif;

  --text-hero:   clamp(2.4rem, 6vw, 5.5rem);
  --text-h2:     clamp(2rem, 4vw, 3.2rem);
  --text-h3:     clamp(1.4rem, 2.5vw, 2rem);
  --text-h4:     clamp(1.15rem, 1.8vw, 1.5rem);
  --text-body:   1rem;
  --text-sm:     0.875rem;
  --text-xs:     0.75rem;

  /* ─── Espaçamento (base 8) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* ─── Bordas ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ─── Sombras ─── */
  --shadow-sm:    0 1px 3px rgba(42,26,24,0.06);
  --shadow-md:    0 4px 16px rgba(42,26,24,0.08);
  --shadow-lg:    0 16px 48px rgba(42,26,24,0.10);
  --shadow-brand: 0 8px 32px rgba(201,104,104,0.22);

  /* ─── Easing ─── */
  --ease-brand:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:   cubic-bezier(0.76, 0, 0.24, 1);

  /* ─── Animações ─── */
  --duration-fast:   0.3s;
  --duration-base:   0.6s;
  --duration-slow:   0.9s;

  /* ─── Z-index ─── */
  --z-base:    1;
  --z-above:   10;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ─── Seleção de texto ─── */
  --accent-selection:     rgba(201, 104, 104, 0.20);
  --text-on-selection:    #2A1A18;
}

/* ─── Seleção de texto ─── */
::selection {
  background: var(--accent-selection);
  color: var(--text-on-selection);
}

/* ─── Scrollbar estilizada ─── */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-bg);
}