/* ============================================================ */
/* TOKENS DE DISEÑO - SUBALAB DICTAMEN TÉCNICO                  */
/* Paleta: Dark Navy + Cyan + Violet + Emerald                  */
/* Tipografía: Syne (Display) + Space Grotesk (Body)            */
/* ============================================================ */

/* Importar tipografías desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Syne:wght@400;500;600;700;800&display=swap');

:root {
  /* ====== PALETA DE COLORES (DICTAMEN) ====== */
  --color-bg-dark: #080D1A;           /* Fondo general oscuro */
  --color-dark-navy: #0B1221;         /* Navy oscuro para tarjetas/fondos secundarios */
  --color-dark-navy-hover: #121C30;   /* Navy más claro para hover */
  
  --color-accent-cyan: #00E7FF;       /* Cyan eléctrico principal */
  --color-accent-cyan-dim: rgba(0, 231, 255, 0.15); /* Cyan con opacidad para fondos sutiles */
  
  --color-accent-violet: #8A2BE2;     /* Violeta sugerido en dictamen */
  --color-accent-emerald: #10B981;    /* Esmeralda para éxito / hover botones */
  
  --color-text-primary: #FFFFFF;      /* Texto principal (Blanco sobre oscuro) */
  --color-text-secondary: #94A3B8;    /* Texto secundario (Gris azulado) */

  /* ====== TIPOGRAFÍA ====== */
  --font-family-display: 'Syne', sans-serif;
  --font-family-body: 'Space Grotesk', sans-serif;
  
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --font-weight-heavy: 800;

  /* ====== SISTEMA DE BORDES (DICTAMEN) ====== */
  --radius-btn: 6px;                  /* Botones */
  --radius-card: 12px;                /* Tarjetas */
  --radius-section: 24px;             /* Secciones grandes */

  /* ====== ESPACIADO Y LAYOUT ====== */
  --max-width-container: 1200px;      /* Max width universal sugerido */
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  /* ====== TRANSICIONES ====== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
}

/* ============================================================ */
/* APLICACIÓN BASE DEL DARK MODE                               */
/* ============================================================ */
html,
body {
  background-color: var(--color-bg-dark) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-family-body) !important;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display) !important;
  color: var(--color-text-primary) !important;
  font-weight: var(--font-weight-heavy) !important;
}

a {
  color: var(--color-accent-cyan);
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--color-accent-emerald);
}