/* ============================================
   VARIABLES.CSS
   Punto único de verdad para colores, tipografía
   y espaciados.
   ============================================ */

:root {
  /* --- Colores: fondo ---------------------- */
  --color-bg: #0a0a0f; /* fondo base, casi negro con matiz azulado */
  --color-bg-secondary: #14141c; /* fondo de tarjetas y bloques elevados */
  --color-bg-elevated: #1c1c26; /* hover sobre tarjetas o elementos aún más «encima» */

  /* --- Colores: acentos (ámbar) ------------- */
  --color-accent: #ff8c42; /* acento principal: botones, enlaces activos, bordes destacados */
  --color-accent-light: #ffb347; /* acento secundario: hover, detalles, brillos */
  --color-accent-dim: #cc6f2f; /* variante apagada del acento, para estados «pressed» o bordes sutiles */

  /* --- Colores: texto ------------------------ */
  --color-text: #f0f0f0; /* texto principal, alto contraste sobre el fondo oscuro */
  --color-text-secondary: #9a9aa5; /* texto secundario: subtítulos, descripciones, metadatos */
  --color-text-muted: #787886; /* texto de baja jerarquía: fechas, etiquetas pequeñas */

  /* --- Colores: utilidad --------------------- */
  --color-border: #26262f; /* bordes sutiles entre bloques */
  --color-overlay: rgba(
    10,
    10,
    15,
    0.85
  ); /* superposición oscura sobre imágenes/fondos */

  /* --- Tipografía: familias ------------------ */
  --font-heading:
    "Space Grotesk", "Segoe UI", sans-serif; /* títulos: look técnico o futurista */
  --font-body:
    "Inter", "Segoe UI", sans-serif; /* texto general: máxima legibilidad */
  --font-mono:
    "JetBrains Mono", "Courier New", monospace; /* código, etiquetas de tecnologías */

  /* --- Tipografía: tamaños -------------------- */
  /* Escala modular, base 16px, ratio ~1.25 */
  --text-xs: 0.75rem; /* 12px — etiquetas, pie de página */
  --text-sm: 0.875rem; /* 14px — texto secundario */
  --text-base: 1rem; /* 16px — párrafos */
  --text-lg: 1.25rem; /* 20px — subtítulos */
  --text-xl: 1.75rem; /* 28px — títulos de sección */
  --text-2xl: 2.5rem; /* 40px — título del hero en dispositivo móvil */
  --text-3xl: 4rem; /* 64px — título del hero en escritorio */

  /* --- Tipografía: pesos ---------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* --- Espaciados ----------------------------- */
  /* Escala en rem para que respete el zoom/accesibilidad del usuario */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2.5rem; /* 40px */
  --space-xl: 4rem; /* 64px */
  --space-2xl: 6rem; /* 96px — separación entre secciones grandes */

  /* --- Bordes y radios ------------------------ */
  --radius-sm: 4px; /* botones, insignias */
  --radius-md: 12px; /* tarjetas */
  --radius-full: 999px; /* elementos circulares/píldora */

  /* --- Sombras --------------------------------- */
  /* Sombras cálidas (con tinte del acento) en vez de negro puro,
     para que combinen con la paleta ámbar */
  --shadow-sm: 0 2px 8px rgba(255, 140, 66, 0.08);
  --shadow-md: 0 4px 20px rgba(255, 140, 66, 0.12);

  /* --- Transiciones ---------------------------- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  /* --- Layout ----------------------------------- */
  --max-width: 1100px; /* ancho máximo del contenido, evita líneas de texto demasiado largas */
  --header-height: 72px;
}