:root {
  /* ── Colores ──────────────────────────────────── */
  --color-primary: #054BC5;
  --color-primary-hover: #043a99;
  --color-bg: #FFFFFF;
  --color-bg-alt: #F4F5F7;
  --color-bg-elevated: #FFFFFF;
  --color-bg-dark: #0B0F14;
  --color-bg-dark-blue: #0A1E3F;
  --color-text: #12151A;
  --color-text-muted: #5B6472;
  --color-text-inverse: #FFFFFF;
  --color-border: #E2E4E8;
  --color-border-subtle: #EDEEF1;

  /* ── Espaciado ────────────────────────────────── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* ── Tipografía ───────────────────────────────── */
  --font-display: 'Archivo', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.3vw,  1.125rem);
  --text-lg:   clamp(1.25rem,  1rem    + 0.5vw,  1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 0.8vw,  2rem);
  --text-2xl:  clamp(2rem,     1.5rem  + 1.5vw,  3rem);
  --text-hero: clamp(2.5rem,   2rem    + 2vw,    4.5rem);

  /* ── Radios ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ── Sombras ──────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.08);

  /* ── Transiciones ─────────────────────────────── */
  --transition-fast: 150ms ease-out;
  --transition-base: 250ms ease-out;
  --transition-slow: 400ms ease-out;

  /* ── Layout ───────────────────────────────────── */
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}