/**
 * ==============================================================================
 * CORTARJAMON.ES — DESIGN SYSTEM MASTER TOKENS
 * "Dark Gourmet & Tactile Gastronomy"
 * Versión: 2.0.0 (Producción 2026)
 * ==============================================================================
 */

:root {
  /* ============================================================================
   * 1. SUPERFICIES Y FONDOS (SURFACES & CONTAINERS)
   * ============================================================================ */
  --surface-base: #131313;              /* Fondo de página principal (Carbon Black) */
  --surface-lowest: #0e0e0e;            /* Fondo profundo para Header, Hero scrim y Footer */
  --surface-low: #1c1b1b;               /* Nivel 1 de elevación suave */
  --surface-container: #201f1f;         /* Tarjetas, paneles por defecto y tarjetas de servicio */
  --surface-high: #2a2a2a;              /* Inputs, estados de hover y pills activas */
  --surface-highest: #353534;           /* Chips elevados, separadores contrastados */
  --surface-bright: #393939;            /* Resaltes y hover en superficies altas */
  
  /* Bloque Editorial Alto Contraste (Sección Loncheado & Hojas de Cata) */
  --surface-cream: #f9f6f0;             /* Pergamino cálido algodón de alta legibilidad */
  --surface-cream-alt: #efe9df;         /* Acento secundario dentro del bloque crema */
  --surface-cream-border: #e5decf;      /* Borde hairline en tarjetas sobre crema */
  --text-cream-dark: #1a1a1a;           /* Texto carbón principal sobre crema */
  --text-cream-muted: #55504a;          /* Texto secundario sobre crema */

  /* ============================================================================
   * 2. TIPOGRAFÍA Y TEXTOS (TEXT COLORS)
   * ============================================================================ */
  --text-primary: #e5e2e1;              /* Off-white cálido (alta legibilidad sobre oscuro, AAA) */
  --text-secondary: #dfbfbd;            /* Texto secundario con ligero matiz jamonero */
  --text-muted: #a68a88;                /* Metadatos, microcopy y placeholders */
  --text-on-accent: #ffffff;            /* Texto blanco puro sobre rojo Bellota */
  --text-on-gold: #261900;              /* Texto oscuro profundo sobre oro */

  /* ============================================================================
   * 3. ACENTOS DE MARCA (BRAND ACCENTS)
   * ============================================================================ */
  /* Bellota Red (Corte y Conversión) */
  --primary-bellota: #8b1e24;           /* Rojo Bellota curado noble */
  --primary-bellota-hover: #6d1419;     /* Hover de botones de acción */
  --primary-bellota-active: #550f13;    /* Click/Active de botones */
  --primary-bellota-light: #ffb3b0;     /* Resalte luminoso para badges y etiquetas de acento */
  --primary-bellota-container: rgba(139, 30, 36, 0.25); /* Píldoras transparentes rojas */

  /* Burnished Gold (Oro Artesanal & Maestría Guild) */
  --secondary-gold: #e9c176;            /* Oro cálido insignia */
  --secondary-gold-alt: #c5a059;        /* Oro envejecido bronce para heráldica y bordes */
  --secondary-gold-hover: #ffd98e;      /* Oro brillante hover */
  --secondary-gold-container: rgba(233, 193, 118, 0.15); /* Píldoras y fondos tenues */
  --gold-glow: 0 0 20px rgba(233, 193, 118, 0.25);       /* Resplandor áureo para destacar */

  /* ============================================================================
   * 4. BORDES Y SEPARADORES (OUTLINES & BORDERS)
   * ============================================================================ */
  --border-subtle: rgba(88, 65, 64, 0.30);    /* Borde estándar gris-rojizo suave */
  --border-gold-subtle: rgba(197, 160, 89, 0.25); /* Línea de pelo dorada (hairline) */
  --border-gold-strong: rgba(233, 193, 118, 0.60); /* Borde dorado para elementos seleccionados */
  --border-gold-focus: #e9c176;                /* Anillo de foco accesible */

  /* ============================================================================
   * 5. SEMÁFORO Y TERCEROS (FEEDBACK & INTEGRATIONS)
   * ============================================================================ */
  --color-success: #10b981;             /* Indicador online y validación */
  --color-whatsapp: #25d366;            /* Verde oficial WhatsApp directo */
  --color-bizum: #009a96;               /* Azul turquesa oficial Bizum checkout */
  --color-error: #ffb4ab;               /* Texto de error sobre fondo oscuro */
  --color-error-bg: #93000a;            /* Contenedor de alerta crítica */

  /* ============================================================================
   * 6. TIPOGRAFÍA Y FUENTES (FONT FAMILIES)
   * ============================================================================ */
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans-title: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ============================================================================
   * 7. SOMBRAS Y ELEVACIÓN (ELEVATIONS)
   * ============================================================================ */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.85);
  --shadow-gold: 0 0 25px rgba(233, 193, 118, 0.20);
  --shadow-bellota: 0 0 25px rgba(139, 30, 36, 0.45);

  /* ============================================================================
   * 8. RADIOS DE CURVATURA (BORDER RADII)
   * ============================================================================ */
  --radius-xs: 2px;
  --radius-sm: 4px;                     /* Curvatura base para tarjetas y botones */
  --radius-md: 8px;                     /* Contenedores medios y formularios */
  --radius-lg: 12px;                    /* Paneles destacados y cards amplias */
  --radius-xl: 16px;                    /* Tarjetas bento y módulos maestros */
  --radius-full: 9999px;                /* Píldoras de badges D.O.P. y switch bilingüe */

  /* ============================================================================
   * 9. ESPACIADOS RÍTMICOS (SPACING SYSTEM - BASE 8PX)
   * ============================================================================ */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ============================================================================
   * 10. TRANSICIONES Y VELOCIDAD (TIMING)
   * ============================================================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
 * UTILIDADES BASE Y ACCESIBILIDAD WCAG 2.1 AA
 * ============================================================================ */
:focus-visible {
  outline: 2px solid var(--border-gold-focus) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 10px rgba(233, 193, 118, 0.4) !important;
}

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

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(90deg, var(--surface-container) 25%, var(--surface-high) 50%, var(--surface-container) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
}