/**
 * ==============================================================================
 * 🎨 DESIGN SYSTEM TOKENS - FUEGO & CARBÓN (ALTA GAMA & CRO)
 * ==============================================================================
 * Estándar visual de excelencia: Sombras multicapa, curvas Bézier aceleradas,
 * tipografía fluida y paleta de lujo (Brasa viva, carbón volcánico, oro fundido).
 */

:root {
  /* --- PALETA CROMÁTICA PRINCIPAL (HSL & RGB) --- */
  --brand-primary: hsl(18, 95%, 52%);          /* Fuego / Brasa Viva */
  --brand-primary-dark: hsl(12, 90%, 42%);     /* Brasa Oscura Intensa */
  --brand-primary-light: hsl(24, 100%, 62%);   /* Resplandor Fuego */
  --brand-primary-rgb: 255, 87, 34;

  --brand-secondary: hsl(42, 95%, 54%);        /* Oro Fundido / Cheddar */
  --brand-secondary-dark: hsl(38, 90%, 42%);   /* Mostaza Artesanal */
  --brand-secondary-rgb: 245, 158, 11;

  --brand-accent-emerald: hsl(158, 75%, 42%);  /* Verde Frescura & Despacho */
  --brand-accent-emerald-rgb: 16, 185, 129;

  /* --- FONDOS & SUPERFICIES DE LUJO (CARBÓN AHUMADO) --- */
  --bg-canvas: #090a0c;                         /* Fondo Carbón Profundo */
  --bg-surface: #121418;                        /* Tarjetas & Paneles */
  --bg-surface-elevated: #181b21;               /* Tarjetas Elevadas */
  --bg-surface-glass: rgba(18, 20, 24, 0.78);   /* Glassmorphism */
  --bg-overlay: rgba(5, 6, 8, 0.85);

  /* --- TEXTO & CONTRASTE --- */
  --text-primary: #f8fafc;                      /* Blanco Roto Nítido */
  --text-secondary: #cbd5e1;                    /* Gris Suave Legible */
  --text-muted: #94a3b8;                        /* Gris Medio Atenuado */
  --text-inverse: #090a0c;

  /* --- BORDES & DELIMITADORES --- */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(255, 87, 34, 0.35);
  --border-active: rgba(245, 158, 11, 0.6);

  /* --- TIPOGRAFÍA DE EXCELENCIA --- */
  --font-heading: 'Montserrat', -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 (LUJO & PROFUNDIDAD) --- */
  --shadow-subtle: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 8px 16px -2px rgba(0, 0, 0, 0.4);

  --shadow-card: 
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 12px 24px -4px rgba(0, 0, 0, 0.6),
    0 24px 48px -8px rgba(0, 0, 0, 0.5);

  --shadow-card-hover: 
    0 6px 12px rgba(0, 0, 0, 0.5),
    0 20px 36px -6px rgba(0, 0, 0, 0.7),
    0 32px 64px -12px rgba(255, 87, 34, 0.18);

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

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

  --shadow-glass:
    0 8px 32px 0 rgba(0, 0, 0, 0.37);

  /* --- 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);
}