/**
 * DESIGN TOKENS - Fundo Moraga
 * Sistema centralizado de variables para mantenimiento y escalabilidad
 * Actualizar estos valores para cambiar toda la marca en un solo lugar
 */

:root {
  /* ============================================
     ESPACIADO - BOTONES
     ============================================ */
  --btn-spacing-xs: 6px 10px;      /* Micro UI elements */
  --btn-spacing-sm: 10px 16px;     /* Navbar items */
  --btn-spacing-md: 12px 26px;     /* Secondary CTAs (Reserva) */
  --btn-spacing-lg: 18px 45px;     /* Primary Hero CTAs */
  --btn-spacing-xl: 24px 50px;     /* Future use - Large CTAs */

  /* ============================================
     TIPOGRAFÍA - BOTONES
     ============================================ */
  --btn-font-weight-base: 500;     /* Links de navegación */
  --btn-font-weight-bold: 700;     /* Botones con acción */
  --btn-font-weight-black: 800;    /* Énfasis máximo */

  --btn-font-size-xs: 0.75rem;     /* 12px */
  --btn-font-size-sm: 0.85rem;     /* 13.6px */
  --btn-font-size-md: 0.92rem;     /* 14.7px */
  --btn-font-size-lg: 1.05rem;     /* 16.8px */
  --btn-font-size-xl: 1.2rem;      /* 19.2px */

  --btn-letter-spacing-normal: 0.25px;
  --btn-letter-spacing-wide: 0.4px;
  --btn-letter-spacing-wider: 0.18em;

  /* ============================================
     COLORES - PALETTE
     ============================================ */
  
  /* Dorado - Marca Principal */
  --color-gold-50: #fef9f0;
  --color-gold-100: #ffe4b5;
  --color-gold-200: #ffd89b;
  --color-gold-300: #ffcc80;
  --color-gold-400: #f0c868;
  --color-gold-500: #e0c04a;
  --color-gold-600: #d4af37;     /* PRIMARIO */
  --color-gold-700: #c9a025;
  --color-gold-800: #b8860b;
  --color-gold-900: #8b6914;

  /* Neutros */
  --color-dark: #0a0a0a;
  --color-dark-secondary: #1a1a1a;
  --color-dark-tertiary: #2a2a2a;
  --color-light: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #ddd;
  --color-gray-400: #999;
  --color-gray-500: #666;

  /* ============================================
     BOTONES - COLORES
     ============================================ */
  --btn-bg-primary: linear-gradient(130deg, rgba(255, 236, 180, 0.98), var(--color-gold-600) 45%, var(--color-gold-800));
  --btn-bg-primary-hover: linear-gradient(130deg, rgba(255, 240, 200, 0.98), var(--color-gold-500) 45%, var(--color-gold-700));
  
  --btn-text-primary: var(--color-dark);
  --btn-text-light: var(--color-light);
  
  --btn-border-primary: 1px solid rgba(255, 255, 255, 0.22);
  --btn-border-gold: 1px solid rgba(212, 175, 55, 0.45);

  /* ============================================
     BORDES Y RADIOS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* ============================================
     SOMBRAS
     ============================================ */
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 10px 26px rgba(212, 175, 55, 0.14);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 46px rgba(0, 0, 0, 0.35);
  
  --shadow-gold-sm: 0 10px 26px rgba(212, 175, 55, 0.14);
  --shadow-gold-md: 0 14px 28px rgba(212, 175, 55, 0.28);
  --shadow-gold-lg: 0 18px 36px rgba(212, 175, 55, 0.32);

  /* ============================================
     TRANSICIONES Y ANIMACIONES
     ============================================ */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 400ms ease;
  
  --transition-shine: 650ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-transform: 200ms ease;
  --transition-filter: 200ms ease;
  --transition-box-shadow: 200ms ease;

  /* ============================================
     ELEVACIÓN Z-INDEX
     ============================================ */
  --z-negative: -1;
  --z-base: 0;
  --z-elevated: 100;
  --z-dropdown: 500;
  --z-sticky: 900;
  --z-fixed: 1000;
  --z-modal: 1500;

  /* ============================================
     BREAKPOINTS RESPONSIVE
     ============================================ */
  --screen-xs: 320px;
  --screen-sm: 640px;
  --screen-md: 1024px;
  --screen-lg: 1280px;
  --screen-xl: 1536px;
}

/* ============================================
   MODO OSCURO REDUCIDO (prefers-reduced-motion)
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: none;
    --transition-fast: none;
    --transition-base: none;
    --transition-slow: none;
    --transition-shine: none;
  }
}