/**
 * Design System Variables — Collpack High-Precision UI
 * Extraídas de new/css/styles.css (template HTML de referencia)
 */

:root {
  /* Paleta (valores reales del template) */
  --cp-navy-dark:      #002447; /* Fondos oscuros y CTAs navy */
  --cp-navy-brand:     #003366; /* Hover / variante brand */
  --cp-signal-orange:  #e07a2c; /* Único naranja de resalte (CTAs) */
  --cp-text-charcoal:  #08121e; /* Texto principal y encabezados */
  --cp-bg-light:       #f5f8fa; /* Fondos de sección sutiles */
  --cp-border-gray:    #e2e8f0; /* Bordes y divisores */
  --cp-white:          #ffffff;
  --cp-gray-400:       #a0aec0; /* Texto muted / lang selector */
  --cp-gray-500:       #718096; /* Texto secundario */
  --cp-gray-700:       #4a5568; /* Texto terciario / nav */

  /* Alias cortos (API del design system) */
  --cp-navy:           var(--cp-navy-dark);
  --cp-orange:         var(--cp-signal-orange);
  --cp-charcoal:       var(--cp-text-charcoal);
  --cp-border:         var(--cp-border-gray);

  /* Tipografía */
  --cp-font-display:    'Space Grotesk', sans-serif;
  --cp-font-body:       'Inter', system-ui, -apple-system, sans-serif;
  --cp-font-mono:       'JetBrains Mono', monospace;
  --bs-font-sans-serif: var(--cp-font-body);

  /* Radios (bordes casi planos del diseño) */
  --cp-radius-sm: 2px;
  --cp-radius-md: 4px;
  --cp-radius-lg: 8px;

  /* Sombras (mínimas; el diseño es principalmente flat) */
  --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --cp-shadow-md: 0 4px 12px rgba(8, 18, 30, 0.08);

  /* Transiciones */
  --cp-transition: all 0.2s ease;

  /* Breakpoints (referencia documental) */
  --cp-bp-sm: 640px;
  --cp-bp-md: 768px;
  --cp-bp-lg: 1024px;
  --cp-bp-xl: 1280px;
}