/* ============================================================
   PALO ROSA — variables.css
   Design tokens y custom properties del sistema
   ============================================================ */

:root {
  /* ── Fondos principales ── */
  --crema:         #FAF7F2;
  --crema-oscura:  #F2EDE4;
  --nude:          #EAE0D5;

  /* ── Identidad de marca Stitch (Glow) ── */
  --rosa-principal: #DCAE96;
  --rosa-claro:     #FAC9B0;
  --rosa-oscuro:    #7A5642;
  --rosa-muy-claro: #FFDBCA;

  /* ── Neutros y grises ── */
  --gris-carbon: #2A2A2A;
  --gris-medio:  #666666;
  --gris-claro:  #AAAAAA;
  --gris-borde:  #E0D8D0;

  /* ── Oscuro ── */
  --negro: #1A1A1A;

  /* ── Tipografía Stitch ── */
  --font-sans:    'Manrope', system-ui, sans-serif;
  --font-serif:   'Noto Serif', Georgia, serif;
  --font-display: 'Noto Serif', Georgia, serif;
  --font-script:  'Noto Serif', cursive;

  /* ── Espaciado ── */
  --container-max: 1400px;
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --section-pad-x: clamp(1.5rem, 4vw, 3rem);

  /* ── Radios (Silent Monolith: bordes rectos) ── */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-full: 0px;

  /* ── Sombras ── */
  --shadow-rosa:       0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-rosa-hover: 0 8px 28px rgba(0, 0, 0, 0.10);
  --shadow-modal:      0 20px 60px rgba(26, 26, 26, 0.30);

  /* ── Transiciones ── */
  --transition-fast:   all 0.2s ease;
  --transition-base:   all 0.3s ease;
  --transition-slow:   all 0.5s ease;

  /* ── Navbar ── */
  --navbar-h: 70px;

  /* ── Alias cortos (usados en secciones oscuras) ── */
  --rosa:      #E8A0A0;   /* = rosa-principal */
  --rosa-soft: #F2C4C4;   /* = rosa-claro     */
  --oro:       #D4AF37;   /* dorado para estrellas */

  /* ── Dark surface tokens (reseñas, glosario) ── */
  --bg-surface:   #0F0F0F;
  --bg-card:      #191919;
  --bg-elevated:  #232323;
  --borde:        rgba(255,255,255,0.08);
  --borde-hover:  rgba(255,255,255,0.18);
  --crema-mid:    rgba(250,247,242,0.65);
  --crema-dim:    rgba(250,247,242,0.35);

  /* ── WhatsApp ── */
  --wa-green: #25D366;

  /* ── Z-index escala ── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-compare: 200;
  --z-overlay: 300;
  --z-drawer:  400;
  --z-modal:   500;
  --z-toast:   600;
  --z-cursor:  9999;
}