/* ARK Business — tokens de diseño (contrato compartido; no editar sin acordarlo)
   Colores de marca extraídos del logo: azul #004892, amarillo #F5C316.
   Regla: el azul predomina; el amarillo es solo acento. */

:root {
  /* Marca */
  --ark-blue: #004892;
  --ark-yellow: #F5C316;

  /* Azules (predominantes) */
  --blue-950: #00152E;
  --blue-900: #001F42; /* fondo oscuro principal */
  --blue-800: #002A57;
  --blue-700: #003670;
  --blue-600: #004892; /* = azul de marca */
  --blue-500: #1F63B0;
  --blue-400: #4F86C6;
  --blue-300: #8DB3E2;
  --blue-200: #C4D8F0;
  --blue-100: #E5EEF9;
  --blue-50: #F2F6FC;

  /* Amarillo (solo acento: CTAs, el camino, detalles) */
  --yellow-500: #F5C316;
  --yellow-400: #F8D24D;
  --yellow-100: #FEF6D8;

  /* Neutros */
  --ink: #0B1526;
  --slate-700: #334155;
  --slate-500: #5B6B82;
  --slate-300: #CBD3DF;
  --line: #E3E8EF;
  --mist: #F6F7F9;
  --white: #FFFFFF;

  /* Semánticos */
  --bg: var(--white);
  --bg-alt: var(--blue-50);
  --bg-dark: var(--blue-900);
  --bg-darker: var(--blue-950);
  --text: var(--ink);
  --text-muted: var(--slate-500);
  --heading: var(--blue-700);
  --text-on-dark: var(--white);
  --text-on-dark-muted: var(--blue-200);
  --line-on-dark: rgba(196, 216, 240, 0.16);
  --accent: var(--yellow-500);
  --accent-text: var(--blue-900); /* texto sobre amarillo */
  --danger: #C62828;
  --danger-on-dark: #FF8A80;
  --success: #1E8E5A;

  /* Tipografía (Google Fonts: Montserrat 600/700/800, Inter 400/500/600) */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  --fs-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fs-5xl: clamp(2.75rem, 2rem + 4.5vw, 5.25rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --container: 1200px;
  --header-h: 72px; /* alto del header fijo; los widgets sticky lo usan como offset */

  /* Formas */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 31, 66, 0.06), 0 1px 3px rgba(0, 31, 66, 0.08);
  --shadow: 0 8px 24px rgba(0, 31, 66, 0.10);
  --shadow-lg: 0 24px 48px rgba(0, 21, 46, 0.22);

  /* Foco visible: doble anillo, funciona sobre claro y oscuro */
  --focus-ring: 0 0 0 3px var(--yellow-500), 0 0 0 5px var(--blue-900);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur: 280ms;
  --dur-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
    --dur-slow: 0ms;
  }
}