/* ══════════════════════════════════════════════════════════════════
   CAMILLEA · sistema de diseño
   Un solo lugar para color, tipografía, ritmo y sombras.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Color ─────────────────────────────────────────────────────── */
  --marfil: #F7F0E4;
  --crema: #FFF9F1;
  --champagne: #EAD9C1;
  --rosa-nude: #EBCBC4;
  --rosa-empolvado: #D9A9A3;
  --dorado: #C49A32;
  --dorado-claro: #D8B65A;
  --cafe: #6D5548;
  --tinta: #332A27;
  --blanco: #FFFDFC;

  /* Variaciones de superficie: ningún fondo queda completamente plano */
  --superficie: var(--crema);
  --superficie-2: var(--marfil);
  --superficie-3: #FDF4EA;
  --superficie-nude: #FBEFEA;
  --linea: rgba(109, 85, 72, .16);
  --linea-suave: rgba(109, 85, 72, .09);
  --texto: var(--tinta);
  --texto-suave: rgba(51, 42, 39, .62);
  --texto-tenue: rgba(51, 42, 39, .42);

  --gradiente-dorado: linear-gradient(112deg, #C49A32 0%, #E3C97C 42%, #C49A32 100%);
  --gradiente-crema: linear-gradient(160deg, #FFFDFC 0%, #FFF9F1 45%, #F7F0E4 100%);
  --gradiente-nude: linear-gradient(155deg, #FBEFEA 0%, #EBCBC4 100%);

  /* ── Tipografía ────────────────────────────────────────────────── */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-hero: clamp(3.2rem, 9vw, 7.4rem);
  --t-display: clamp(2.4rem, 5.2vw, 4.2rem);
  --t-titulo: clamp(1.9rem, 3.4vw, 2.9rem);
  --t-sub: clamp(1.25rem, 2vw, 1.6rem);
  --t-base: 1rem;
  --t-pequeno: .875rem;
  --t-micro: .75rem;
  --eyebrow: .7rem;

  /* ── Ritmo y forma ─────────────────────────────────────────────── */
  --ancho: 1280px;
  --ancho-texto: 62ch;
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --seccion: clamp(4rem, 9vw, 7.5rem);

  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;
  /* Formas orgánicas: se usan en tarjetas de categoría y máscaras de imagen */
  --organica-1: 58% 42% 46% 54% / 44% 48% 52% 56%;
  --organica-2: 44% 56% 60% 40% / 52% 40% 60% 48%;

  --sombra-suave: 0 1px 2px rgba(109, 85, 72, .05), 0 8px 24px rgba(109, 85, 72, .06);
  --sombra-media: 0 2px 6px rgba(109, 85, 72, .06), 0 18px 46px rgba(109, 85, 72, .10);
  --sombra-alta: 0 30px 70px rgba(109, 85, 72, .16);

  /* ── Movimiento ────────────────────────────────────────────────── */
  --rapido: 200ms;
  --medio: 320ms;
  --lento: 500ms;
  --curva: cubic-bezier(.22, .61, .36, 1);
  --curva-suave: cubic-bezier(.4, 0, .2, 1);

  --header-alto: 86px;
  --topbar-alto: 38px;
}

@media (max-width: 780px) {
  :root { --header-alto: 68px; --topbar-alto: 34px; }
}

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