/**
 * ==============================================================================
 * 🌭 DESIGN SYSTEM TOKENS - STREET DOGS & CO. (RETRO DINER DE LUJO & CRO)
 * ==============================================================================
 * Estándar visual de excelencia: Sombras multicapa difusas, curvas Bézier aceleradas,
 * tipografía fluida y paleta retro-urbana sofisticada.
 */

:root {
  /* --- PALETA CROMÁTICA PRINCIPAL (RETRO DINER CONTEMPORÁNEO) --- */
  --brand-primary: hsl(0, 78%, 50%);            /* Rojo Carmín Artesanal */
  --brand-primary-dark: hsl(0, 85%, 38%);       /* Carmín Ahumado */
  --brand-primary-light: hsl(0, 85%, 62%);      /* Rojo Vibrante */
  --brand-primary-rgb: 220, 38, 38;

  --brand-secondary: hsl(42, 92%, 50%);        /* Mostaza Dijon / Queso Dorado */
  --brand-secondary-dark: hsl(38, 90%, 40%);   /* Mostaza Antigua */
  --brand-secondary-rgb: 234, 179, 8;

  --brand-navy: hsl(218, 38%, 14%);             /* Azul Marino Urbano Profundo */
  --brand-navy-dark: hsl(220, 45%, 9%);         /* Marino Carbón */
  --brand-navy-rgb: 15, 23, 42;

  --brand-accent-emerald: hsl(158, 75%, 40%);  /* Verde Esmeralda Fresco */
  --brand-accent-emerald-rgb: 16, 185, 129;

  /* --- SUPERFICIES & FONDOS (CREMA CÁLIDO & PIZARRA) --- */
  --bg-canvas: #faf8f5;                         /* Crema Suave Marfil */
  --bg-surface: #ffffff;                        /* Blanco Puro */
  --bg-surface-elevated: #ffffff;
  --bg-surface-muted: #f4f0eb;                  /* Tinte Arena Suave */
  --bg-surface-glass: rgba(255, 255, 255, 0.88);/* Glassmorphism */
  --bg-dark-contrast: #11141a;                  /* Pizarra Oscura para Secciones Especiales */

  /* --- TEXTO & CONTRASTE --- */
  --text-primary: #0f172a;                      /* Azul Marino Profundo Casi Negro */
  --text-secondary: #475569;                    /* Gris Pizarra Medio Legible */
  --text-muted: #64748b;                        /* Gris Atenuado */
  --text-inverse: #ffffff;

  /* --- BORDES & DELIMITADORES --- */
  --border-subtle: rgba(226, 232, 240, 0.9);
  --border-glass: rgba(226, 232, 240, 0.8);
  --border-accent: rgba(220, 38, 38, 0.35);
  --border-active: #059669;

  /* --- TIPOGRAFÍA DE EXCELENCIA --- */
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Titulares con letter-spacing negativo obligatorio */
  --letter-spacing-h1: -0.035em;
  --letter-spacing-h2: -0.03em;
  --letter-spacing-h3: -0.025em;
  --letter-spacing-badge: 1.5px;

  /* --- SOMBRAS MULTICAPA OBLIGATORIAS (LUZ AMBIENTAL DIFUSA + CAÍDA) --- */
  --shadow-subtle: 
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 6px -2px rgba(15, 23, 42, 0.05);

  --shadow-card: 
    0 2px 4px rgba(15, 23, 42, 0.04),
    0 12px 24px -4px rgba(15, 23, 42, 0.08),
    0 20px 40px -8px rgba(15, 23, 42, 0.06);

  --shadow-card-hover: 
    0 8px 16px -2px rgba(15, 23, 42, 0.06),
    0 20px 32px -4px rgba(15, 23, 42, 0.12),
    0 32px 56px -12px rgba(220, 38, 38, 0.15);

  --shadow-cta: 
    0 10px 25px -4px rgba(var(--brand-primary-rgb), 0.4),
    0 4px 10px -2px rgba(var(--brand-primary-rgb), 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);

  --shadow-cta-hover: 
    0 14px 30px -4px rgba(var(--brand-primary-rgb), 0.55),
    0 6px 14px -2px rgba(var(--brand-primary-rgb), 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);

  --shadow-glass:
    0 8px 32px 0 rgba(15, 23, 42, 0.08);

  /* --- RADIOS DE BORDE MODERNOS --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* --- TRANSICIONES Y CURVAS BÉZIER PROFESIONALES --- */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-spring);
  --transition-base: 0.3s var(--ease-spring);
  --transition-slow: 0.6s var(--ease-spring);
}