/*
 * SAGESA — Design tokens.
 * Fuente de verdad: "Sagesa Design System · Web UI fonts & colors spec"
 * entregado por el cliente (19 jul 2026). Código contra los alias
 * semánticos (--color-*), no contra la escala en crudo, salvo que
 * no exista alias.
 */

@font-face {
  font-family: 'Stack Sans Notch';
  src: url('../fonts/StackSansNotch-Variable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Backgrounds ─── */
  --bg: #0d1f35;            /* dark navy — secciones oscuras / body hero */
  --bg-mid: #152840;
  --bg-surface: #1a3453;
  --bg-light: #f4f3ee;
  --bg-white: #ffffff;

  /* ─── Nuevo sistema de color ─── */
  --page: #FAFAFB;           /* fondo de página (light sections) */
  --paper: #FFFFFF;

  /* ─── Paleta Navy ─── */
  --navy-50:  #EEF2F8;
  --navy-100: #D8E1EE;
  --navy-200: #B1C2DA;
  --navy-300: #7E9AC2;
  --navy-400: #4F75A8;
  --navy-500: #1E4E89;
  --navy-600: #0E3D74;
  --navy-700: #06335F;
  --navy-800: #023467;      /* navy primario — reemplaza --accent */
  --navy-900: #02244A;
  --navy-950: #011531;
  --navy-soft: #2C416D;

  /* ─── Texto ─── */
  --text: #ffffff;
  --text-dark: #1F2638;      /* ink-800 */
  --text-secondary: #515A6F; /* ink-600 */
  --text-muted: rgba(255,255,255,0.55);
  --text-muted-dark: rgba(31,38,56,0.62);
  --text-subtle: rgba(255,255,255,0.25);

  /* ─── Bordes ink ─── */
  --ink-200: #DEE2EA;
  --ink-600: #515A6F;
  --ink-800: #1F2638;

  /* ─── Acentos ─── */
  --accent: #023467;         /* navy-800 — acento principal */
  --accent-light: #0E3D74;   /* navy-600 */
  --accent-pale: #EEF2F8;    /* navy-50 */
  --coral-500: #FE6B56;      /* CTA */
  --coral-600: #E54E38;
  --sky-600: #3F87A4;        /* info */
  --leaf-600: #408450;       /* éxito */
  --gold: #946E15;           /* butter-700 sobre fondos claros */
  --gold-light: #b8902a;     /* butter-600 sobre fondos oscuros */

  /* ─── Bordes ─── */
  --border: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.2);
  --border-light: rgba(2,52,103,0.14);
  --border-dark: rgba(13,31,53,0.14);

  /* ─── Tipografía ─── */
  --font-display: "Source Serif 4 Variable", "Source Serif 4", "Iowan Old Style", Georgia, serif; /* h1, h2 únicamente */
  --font-body: "DM Sans Variable", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* body, UI, labels, data, h3–h6 */
  --font-brand: 'Stack Sans Notch', 'DM Sans', sans-serif; /* wordmark únicamente; requiere archivo local */

  /* ─── Escala tipográfica ─── */
  --fs-hero:    clamp(58px, 7.5vw, 108px);
  --fs-display: clamp(42px, 5vw, 72px);
  --fs-h2:      clamp(32px, 3.8vw, 52px);
  --fs-h3:      clamp(22px, 2.6vw, 32px);
  --fs-h4:      clamp(18px, 1.8vw, 24px);
  --fs-body:    clamp(16px, 1vw, 18px);
  --fs-small:   14px;
  --fs-label:   11px;
  --fw-display: 400;
  --lh-display: 1.08;
  --lh-section: 1.15;
  --lh-body:    1.45;

  /* ─── Radios ─── */
  --radius-pill:  9999px;
  --radius-input: 8px;
  --radius-card:  12px;
  --radius-hero:  18px;

  /* ─── Espaciado (escala 4px) ─── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px;

  /* ─── Duración de transiciones ─── */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 240ms;

  /* ─── Easing ─── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);

  /* ─── Layout ─── */
  --nav-h: 80px;
  --section-pad: clamp(80px, 10vw, 140px);
  --container: 1320px;
  --gutter: clamp(24px, 5vw, 80px);
}