/*
 * Tokens de marca BLU — v3, dirección editorial/2026: hero oscuro con acentos
 * "glass", tipografía grande en minúsculas/mixtas (no bloques en mayúsculas),
 * bento cards, menos círculos/pastillas, más contraste y aire.
 *
 * Breakpoints (documentados aquí porque las custom properties no pueden
 * usarse dentro de @media): sm 576px · md 768px · lg 1024px · xl 1280px
 */

:root {
  /* Marca */
  --blu-primary: #009ddc;
  --blu-primary-light: #4fc3ec;
  --blu-primary-dark: #007bb0;
  --blu-secondary: #004990;
  --blu-tertiary: #4380bc;

  /* Superficie oscura (hero, footer) */
  --ink-900: #051222;
  --ink-800: #0a2036;
  --ink-700: #113049;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-bg-light: rgba(255, 255, 255, 0.7);
  --glass-border-light: rgba(255, 255, 255, 0.6);

  /* Fondos claros */
  --blu-wash: #eef6fb;
  --blu-wash-soft: #f7fafc;
  --blu-blob: #d9eefb;

  /* Neutrales */
  --gray-900: #101c2c;
  --gray-800: #3d4c5e;
  --gray-700: #62717f;
  --gray-500: #94a3b3;
  --gray-300: #d7e2ea;
  --gray-200: #e7eef3;
  --gray-100: #f4f7f9;
  --white: #ffffff;

  /* Estado */
  --success: #33cc00;
  --danger: #ff0000;
  --star: #ffb020;

  /* Tipografía moderna auto-hospedada (ver css/fonts.css): Poppins para
     títulos/display, Inter para texto de cuerpo. */
  --font-heading: "Poppins", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, sans-serif;

  /* Espaciado */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 5rem;

  /* Forma: esquinas más contenidas, ya no todo circular/pastilla */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-soft: 0 30px 60px -24px rgba(5, 18, 34, 0.35);
  --shadow-card: 0 14px 30px -16px rgba(5, 18, 34, 0.18);
  --shadow-glow: 0 0 0 1px var(--glass-border), 0 20px 40px -20px rgba(0, 157, 220, 0.45);

  --container-max: 1200px;
}