/* =========================================================
   MELISART — Sistema de diseño
   Variables de marca: paleta, tipografías, espaciados, sombras
   Regla 70/20/10 → 70% crema · 20% violetas · 10% dorado
   ========================================================= */

:root {
  /* ---------- PALETA ---------- */
  /* Violetas (20%) */
  --color-violeta-profundo: #1E0E3E;
  --color-violeta-noche:    #3A1F6E;
  --color-violeta-medio:    #5C3A9A;
  --color-violeta-mistico:  #8B62C4;
  --color-lavanda:          #C8B0E0;
  --color-lavanda-claro:    #DDD0F5;
  --color-lavanda-card:     #EDE6FF;

  /* Cremas (70%) */
  --color-crema:        #F5F0E8;
  --color-crema-claro:  #FAF6EE;
  --color-blanco:       #FFFFFF;

  /* Dorado (10% — ornamento, nunca protagonista) */
  --color-dorado:        #D4A843;
  --color-dorado-claro:  #E8C460;

  /* Tinta */
  --color-tinta:         #1F1635;
  --color-tinta-suave:   #4A3F66;
  --color-tinta-muted:   #7A6F8E;

  /* ---------- TIPOGRAFÍAS ---------- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-micro:   'Inter', sans-serif;

  /* Pesos */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* Tamaños — escala fluida con clamp() para mobile-first responsive sin media queries */
  --fs-micro:  clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);   /* labels mayúsculas */
  --fs-small:  clamp(0.85rem, 0.83rem + 0.15vw, 0.95rem); /* captions, footnote */
  --fs-body:   clamp(1rem, 0.97rem + 0.2vw, 1.1rem);      /* texto principal */
  --fs-lead:   clamp(1.1rem, 1.05rem + 0.3vw, 1.3rem);    /* bajada de hero */
  --fs-h4:     clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-h3:     clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h2:     clamp(2rem, 1.6rem + 1.5vw, 3rem);
  --fs-h1:     clamp(2.5rem, 1.8rem + 3vw, 4.75rem);      /* hero display */

  /* Line height */
  --lh-tight:    1.1;
  --lh-snug:     1.25;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-xwide:  0.18em; /* labels mayúsculas tipo "ARQUITECTURA DE REALIDADES" */

  /* ---------- ESPACIADOS (escala 8pt) ---------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */

  /* Espaciados de sección — fluido para que respire en mobile y desktop */
  --section-py: clamp(3rem, 2.2rem + 3.5vw, 6rem);
  --section-px: clamp(1.25rem, 0.5rem + 3vw, 4rem);

  /* Anchos */
  --container-narrow: 720px;
  --container-base:   1100px;
  --container-wide:   1280px;

  /* ---------- BORDES Y RADIOS ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --border-thin:    1px solid var(--color-dorado);
  --border-subtle:  1px solid rgba(212, 168, 67, 0.25);

  /* ---------- SOMBRAS ---------- */
  --shadow-sm:  0 2px 8px rgba(31, 22, 53, 0.06);
  --shadow-md:  0 8px 24px rgba(31, 22, 53, 0.08);
  --shadow-lg:  0 20px 48px rgba(31, 22, 53, 0.12);
  --shadow-gold: 0 8px 32px rgba(212, 168, 67, 0.18);

  /* ---------- TRANSICIONES ---------- */
  --ease-soft:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);

  --t-fast:  180ms var(--ease-soft);
  --t-base:  280ms var(--ease-soft);
  --t-slow:  500ms var(--ease-out);

  /* ---------- LAYOUT ---------- */
  --header-h: 72px;
  --z-header: 100;
  --z-sticky-cta: 90;
  --z-overlay: 200;
}