/* =============================================================
   VARIABLES.CSS — Design Tokens de La Choza
   Todos los valores base del sistema de diseño.
   ============================================================= */

:root {

  /* ── COLORES PRINCIPALES ── */
  --color-bg:          #0D0D0B;
  --color-surface:     #161610;
  --color-surface-2:   #1E1E16;
  --color-surface-3:   #252519;

  --color-gold:        #C8A96E;
  --color-gold-light:  #E2C99A;
  --color-gold-dim:    #9A7D4E;
  --color-gold-glow:   rgba(200, 169, 110, 0.15);

  --color-cream:       #F5EDD8;
  --color-text:        #EDE8DE;
  --color-text-muted:  #8A8374;
  --color-text-faint:  #4A453E;

  --color-accent:      #7B6A4F;
  --color-accent-2:    #5C4F38;

  --color-border:      rgba(200, 169, 110, 0.12);
  --color-border-soft: rgba(237, 232, 222, 0.08);

  /* ── TIPOGRAFÍA ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-accent:  'Playfair Display', Georgia, serif;

  /* Escalas de tamaño — fluidas con clamp() */
  --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);
  --text-sm:   clamp(0.85rem, 1.8vw, 0.938rem);
  --text-base: clamp(1rem,    2vw,   1rem);
  --text-md:   clamp(1.1rem,  2.2vw, 1.125rem);
  --text-lg:   clamp(1.2rem,  2.5vw, 1.25rem);
  --text-xl:   clamp(1.4rem,  3vw,   1.5rem);
  --text-2xl:  clamp(1.6rem,  3.5vw, 2rem);
  --text-3xl:  clamp(2rem,    5vw,   2.75rem);
  --text-4xl:  clamp(2.5rem,  6vw,   3.5rem);
  --text-5xl:  clamp(3rem,    8vw,   5rem);
  --text-hero: clamp(3.5rem,  10vw,  7rem);

  /* ── ESPACIADO ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ── BREAKPOINTS (referencia — usar en media queries) ── */
  /* --bp-sm:  480px  */
  /* --bp-md:  768px  */
  /* --bp-lg:  1024px */
  /* --bp-xl:  1280px */
  /* --bp-2xl: 1536px */

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

  /* ── SOMBRAS ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:  0 16px 64px rgba(0,0,0,0.7);
  --shadow-gold: 0 0 24px rgba(200, 169, 110, 0.25);
  --shadow-gold-sm: 0 0 12px rgba(200, 169, 110, 0.18);

  /* ── TRANSICIONES ── */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-slower: 0.8s cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Z-INDEX ── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-cursor:  9999;

  /* ── GRADIENTES ── */
  --gradient-hero:    linear-gradient(180deg, rgba(13,13,11,0.2) 0%, rgba(13,13,11,0.6) 50%, rgba(13,13,11,0.92) 100%);
  --gradient-surface: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
  --gradient-gold:    linear-gradient(135deg, var(--color-gold-dim) 0%, var(--color-gold) 50%, var(--color-gold-light) 100%);
  --gradient-text:    linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-light) 60%, var(--color-cream) 100%);

  /* ── BLUR ── */
  --blur-glass: blur(16px) saturate(180%);
  --blur-sm:    blur(8px);

  /* ── DIMENSIONES NAVBAR ── */
  --nav-height-mobile: 64px;
  --nav-height:        80px;

  /* ── ANCHO MÁXIMO DE CONTENIDO ── */
  --max-width:     1280px;
  --max-width-sm:  680px;
  --max-width-md:  900px;

}