/* ==========================================================================
   Design tokens
   Paleta navy/white tomada de la edicion "Enterprise White & Navy".
   Todo el sitio se pinta a partir de estas variables: cambiar el tema es
   cambiar un bloque, nunca tocar los componentes.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --navy-950: #001229;
  --navy-900: #001e40;
  --navy-800: #003366;
  --navy-700: #1f477b;
  --navy-600: #3a5f94;
  --navy-300: #a7c8ff;
  --navy-200: #d5e3ff;
  --navy-100: #e7eeff;
  --navy-050: #f0f3ff;

  /* --- Superficies (tema claro por defecto) ----------------------------- */
  --bg: #f9f9ff;
  --bg-alt: #f0f3ff;
  --surface: #ffffff;
  --surface-alt: #e7eeff;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --border: #c3c6d1;
  --border-soft: rgba(58, 95, 148, 0.16);

  /* --- Texto ------------------------------------------------------------ */
  --text: #111c2d;
  --text-muted: #43474f;
  --text-subtle: #737780;

  /* --- Acentos ---------------------------------------------------------- */
  --brand: #001e40;
  --brand-strong: #003366;
  --brand-soft: #d5e3ff;
  --brand-accent: #3a5f94;
  --on-brand: #ffffff;
  /* Azul de enlace: mas vivo que --brand-accent para que un link dentro de
     texto normal se note de inmediato como clickeable. */
  --link: #1d4ed8;

  /* Banda oscura (secciones de contraste tipo "Private Infrastructure") */
  --band-bg: #001e40;
  --band-surface: rgba(255, 255, 255, 0.06);
  --band-border: rgba(255, 255, 255, 0.12);
  --band-text: #ffffff;
  --band-text-muted: #a7c8ff;

  /* Estados */
  --success: #1b7f4b;
  --warning: #9a6700;
  --danger: #ba1a1a;
  --danger-soft: #ffdad6;

  /* --- Efectos ---------------------------------------------------------- */
  --glow: rgba(58, 95, 148, 0.28);
  --shadow-sm: 0 1px 2px rgba(0, 30, 64, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(0, 30, 64, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(0, 30, 64, 0.32);
  --shadow-glow: 0 0 0 1px var(--border-soft), 0 20px 50px -24px var(--glow);

  /* --- Tipografia ------------------------------------------------------- */
  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.12rem, 1.05rem + 0.4vw, 1.32rem);
  --step-2: clamp(1.38rem, 1.24rem + 0.7vw, 1.78rem);
  --step-3: clamp(1.7rem, 1.44rem + 1.2vw, 2.4rem);
  --step-4: clamp(2.1rem, 1.62rem + 2.2vw, 3.4rem);
  --step-5: clamp(2.6rem, 1.7rem + 4vw, 5rem);

  /* --- Espaciado y radios ---------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 7rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --container: 1240px;
  --nav-height: 68px;

  /* --- Movimiento ------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur-mid: 380ms;
  --dur-slow: 720ms;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Tema oscuro: mismo lenguaje navy, invertido. Se activa con el toggle
   (data-theme) o con la preferencia del sistema si el usuario no ha elegido.
   -------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #050c18;
  --bg-alt: #081627;
  --surface: #0b1c33;
  --surface-alt: #102a49;
  --surface-glass: rgba(11, 28, 51, 0.72);
  --border: #1e3a5f;
  --border-soft: rgba(167, 200, 255, 0.16);

  --text: #e8eeff;
  --text-muted: #b3c6e4;
  --text-subtle: #7f9ac0;

  --brand: #a7c8ff;
  --brand-strong: #d5e3ff;
  --brand-soft: rgba(167, 200, 255, 0.14);
  --brand-accent: #6f9bd8;
  --on-brand: #001229;
  --link: #7aa2ff;

  --band-bg: #081627;
  --band-surface: rgba(167, 200, 255, 0.06);
  --band-border: rgba(167, 200, 255, 0.14);
  --band-text: #e8eeff;
  --band-text-muted: #a7c8ff;

  --danger-soft: rgba(186, 26, 26, 0.2);

  --glow: rgba(167, 200, 255, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}