/* ─────────────────────────────────────────────────────────────
   ONUH DISTRIBUIDORA · DESIGN TOKENS
   Paleta extraída da logo oficial (lilás + mauve + plum).
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Cores da marca Onuh ── */
  --color-lilac:     #C8BED9;
  --color-lilac-2:   #D8CFE7;
  --color-mauve:     #A093BF;
  --color-plum:      #4A3B6B;
  --color-plum-2:    #362A51;
  --color-aubergine: #2B1E3D;
  --color-midnight:  #1C1426;

  /* ── Neutros quentes lavanda ── */
  --color-mist:  #F5F2F8;
  --color-veil:  #EAE4F0;
  --color-smoke: #8A7FA3;

  /* ── Acento único (toque árabe) ── */
  --color-champagne: #D4B896;
  --color-champagne-2: #E5C9A5;

  /* ── Utilitários ── */
  --color-success: #7A9B6E;
  --color-line-dark:  rgba(200, 190, 217, 0.12);
  --color-line-light: rgba(74, 59, 107, 0.12);

  /* ── Sombras (perfume, com alma lilás) ── */
  --shadow-xs:   0 1px 2px rgba(28, 20, 38, 0.08);
  --shadow-soft: 0 12px 40px -12px rgba(28, 20, 38, 0.35);
  --shadow-lift: 0 20px 60px -20px rgba(28, 20, 38, 0.5);
  --shadow-halo: 0 0 80px -10px rgba(200, 190, 217, 0.4);
  --shadow-champ: 0 0 40px -8px rgba(212, 184, 150, 0.3);

  /* ── Gradient meshes ── */
  --mesh-lilac:
    radial-gradient(55% 55% at 18% 28%, rgba(200, 190, 217, 0.55) 0%, transparent 60%),
    radial-gradient(50% 50% at 82% 72%, rgba(160, 147, 191, 0.35) 0%, transparent 60%),
    radial-gradient(35% 35% at 50% 100%, rgba(212, 184, 150, 0.2) 0%, transparent 60%);
  --mesh-plum:
    radial-gradient(60% 60% at 30% 20%, rgba(74, 59, 107, 0.7) 0%, transparent 60%),
    radial-gradient(50% 50% at 70% 80%, rgba(212, 184, 150, 0.18) 0%, transparent 60%),
    radial-gradient(45% 45% at 10% 90%, rgba(200, 190, 217, 0.15) 0%, transparent 60%);

  /* ── Tipografia ── */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-quote:   'Instrument Serif', ui-serif, Georgia, serif;

  /* ── Escala fluida ── */
  --fs-display: clamp(2.5rem, 3.2vw + 1rem, 4.5rem);
  --fs-h1:      clamp(2.25rem, 2.8vw + 1rem, 3.75rem);
  --fs-h2:      clamp(1.875rem, 2vw + 1rem, 2.875rem);
  --fs-h3:      clamp(1.375rem, 1vw + 0.75rem, 1.875rem);
  --fs-lead:    clamp(1rem, 0.35vw + 0.9rem, 1.1875rem);
  --fs-body:    clamp(0.95rem, 0.2vw + 0.9rem, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-tiny:    0.75rem;

  /* ── Espaçamento ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;
  --space-20: 10rem;
  --container: min(1200px, calc(100vw - 3rem));
  --container-wide: min(1400px, calc(100vw - 2.5rem));

  /* ── Raios ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-card: 20px;
  --radius-lg:   28px;
  --radius-pill: 9999px;

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-1:    200ms;
  --dur-2:    400ms;
  --dur-3:    700ms;
  --dur-4:    1200ms;

  /* ── Layout ── */
  --header-h: 84px;
  --z-header: 100;
  --z-floating: 200;
  --z-modal: 300;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}