/* ============================================================ */
/* TOKENS DE DISEÑO CENTRALIZADOS - SUBALAB v2.0              */
/* ============================================================ */
/* Este archivo define TODOS los valores reutilizables del      */
/* sitio. Cambiar un color aquí lo cambia AUTOMÁTICAMENTE      */
/* en todas partes. Así se mantiene consistencia.               */
/* ============================================================ */

:root {
  /* ====== COLORES PRINCIPALES ====== */
  --color-gov-blue: #004884;           /* Azul oficial Gov.co */
  --color-primary-red: #f5333f;        /* Rojo SubaLab principal */
  --color-accent-green: #5add8b;       /* Verde "Lab en movimiento" */
  --color-neon-cyan: #00e7ff;          /* Cian hover/efectos */
  --color-accent-yellow: #f7c22e;      /* Amarillo secundario */

  /* ====== COLORES NEUTROS ====== */
  --color-text-dark: #1a1a1a;          /* Texto principal */
  --color-text-medium: #4a4a4a;        /* Texto secundario */
  --color-text-light: #d1d1d1;         /* Texto en fondos oscuros */
  --color-background-light: #f9f9f9;   /* Fondo claro */
  --color-background-dark: #1a1a24;    /* Fondo oscuro footer */
  --color-footer-bg: #0d2240;          /* Footer específico */

  /* ====== ESPACIADO (Sistema de 8px) ====== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 40px;

  /* ====== BORDES REDONDEADOS ====== */
  --radius-sm: 8px;                    /* Botones pequeños */
  --radius-md: 12px;                   /* Tarjetas */
  --radius-lg: 20px;                   /* Secciones grandes */
  --radius-full: 50%;                  /* Círculos */

  /* ====== SOMBRAS ====== */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

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

  /* ====== BREAKPOINTS (Responsive) ====== */
  --breakpoint-sm: 576px;              /* Phones grandes */
  --breakpoint-md: 768px;              /* Tablets */
  --breakpoint-lg: 992px;              /* Laptops */
  --breakpoint-xl: 1200px;             /* Desktops */

  /* ====== TRANSICIONES ====== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ====== ANCHOS MÁXIMOS (Layout) ====== */
  --max-width-container: 1200px;
  --max-width-narrow: 900px;
}

/* ============================================================ */
/* APLICAR VARIABLES A ELEMENTOS BASE                          */
/* ============================================================ */

html,
body {
  color: var(--color-text-dark);
  font-family: var(--font-family-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  color: var(--color-text-dark);
}

a {
  color: var(--color-primary-red);
  transition: color var(--transition-normal);
}

a:hover {
  color: var(--color-neon-cyan);
}

button,
.btn,
input[type="button"],
input[type="submit"] {
  border-radius: var(--radius-full);
  padding: var(--spacing-md) var(--spacing-lg);
  font-weight: var(--font-weight-black);
  transition: all var(--transition-normal);
}