/**
 * VARIABLES GLOBALES Y TOKENS DE DISEÑO
 * Portafolio Profesional - Carlos Hernández
 * Paleta corporativa: #0B1220 (Noche), #14263D (Acero), #22D3EE (Cian), #F4F7FB (Blanco)
 */

:root {
  /* Paleta Corporativa Principal */
  --bg-primary: #0B1220;          /* Azul noche profundo */
  --bg-secondary: #070D18;        /* Azul noche ultra oscuro */
  --surface-card: #14263D;        /* Azul acero para tarjetas y paneles */
  --surface-hover: #1A3353;       /* Azul acero interactivo */
  --surface-accent: rgba(34, 211, 238, 0.08); /* Tinte translúcido cian */

  /* Colores de Acento y Marca */
  --accent-cyan: #22D3EE;         /* Cian eléctrico */
  --accent-cyan-hover: #38BDF8;   /* Cian más luminoso */
  --accent-cyan-glow: rgba(34, 211, 238, 0.25);
  --accent-border: rgba(34, 211, 238, 0.22);
  --border-subtle: rgba(244, 247, 251, 0.08);

  /* Tipografía y Escala de Grises */
  --text-primary: #F4F7FB;        /* Blanco suave principal */
  --text-secondary: #94A3B8;      /* Gris azulado para subtítulos */
  --text-muted: #64748B;          /* Texto atenuado/secundario */
  --text-code: #E2E8F0;           /* Texto de código estándar */

  /* Sintaxis del Editor de Código */
  --syn-keyword: #F472B6;         /* Rosa/magenta para palabras clave (const, function, SELECT) */
  --syn-function: #38BDF8;        /* Cian claro para funciones */
  --syn-string: #A7F3D0;          /* Verde menta suave para strings */
  --syn-number: #FBBF24;          /* Ámbar para números */
  --syn-comment: #64748B;         /* Gris atenuado para comentarios */
  --syn-operator: #22D3EE;        /* Cian para operadores */
  --syn-variable: #F4F7FB;        /* Blanco suave para variables */

  /* Estados Funcionales */
  --status-success: #10B981;
  --status-warning: #F59E0B;
  --status-info: #22D3EE;
  --status-purple: #A855F7;

  /* Fuentes del Sistema y Técnicas */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, Menlo, Monaco, monospace;

  /* Espaciado y Layout */
  --container-max-width: 1200px;
  --nav-height: 72px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Transiciones y Sombras */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-card: 0 10px 30px -10px rgba(7, 13, 24, 0.7);
  --shadow-glow: 0 0 25px -5px rgba(34, 211, 238, 0.2);
}