/* ============================================================
   01-tokens.css — Design tokens corporativos (paleta del logo)
   ============================================================ */

:root {
  /* --- Brand corporativo (del logo) --- */
  --navy-900: #0F2138;       /* base profunda */
  --navy-800: #1A3252;       /* sections oscuras */
  --navy-700: #234168;       /* nav, headings */
  --navy-600: #2F5685;       /* hover, links */
  --navy-500: #4A77A7;       /* mute en dark */
  --navy-100: #DCE6F1;       /* borders en dark */

  --orange-500: #F58220;     /* acento primario */
  --orange-600: #E46B0A;     /* hover */
  --orange-400: #FFA255;     /* light variant */
  --orange-100: #FFE8D4;     /* fondo suave */

  --teal-500: #2BB8A8;       /* acento secundario */
  --teal-600: #1E9A8C;
  --teal-100: #D2F0EC;

  --purple-500: #6E6FB5;     /* terciario */
  --coral-500: #E45A6E;      /* notificación / strike */

  /* --- Neutrals --- */
  --ink: #0F2138;            /* texto principal */
  --ink-soft: #3D4D63;       /* texto secundario */
  --mute: #556070;           /* labels/captions — #556070 da ~4.6:1 sobre --bg (WCAG AA) */
  --line: #DDE4EC;           /* divisores */
  --line-soft: #EEF2F7;
  --bg: #F8F6F0;             /* cream off-white */
  --bg-soft: #FFFFFF;        /* surface elevada */
  --bg-tint: #F0F4F9;        /* tint sutil */

  /* --- Semantic aliases --- */
  --accent: var(--orange-500);
  --accent-ink: #FFFFFF;
  --accent-2: var(--teal-500);
  --accent-3: var(--purple-500);

  /* Marcas de pago */
  --yape: #742283;
  --plin: #00BFB3;
  --visa: #1A1F71;
  --izipay: #FF7A00;

  /* WhatsApp brand — R-004 */
  --wa-green: #25D366;
  --wa-green-hover: #1FB856;
  --wa-text: #0A2E1A;

  /* Frosted glass surfaces — R-004 */
  --surface-frosted: rgba(255, 255, 255, 0.92);
  --surface-frosted-heavy: rgba(255, 255, 255, 0.97);

  /* Dark surface text — R-009 */
  --ink-dark-soft: rgba(255, 255, 255, 0.70);
  --ink-dark-mute: rgba(255, 255, 255, 0.45);

  /* --- Tipografía --- */
  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, monospace; /* UIUX-010: JetBrains Mono removida — usa sistema; se eliminó del Google Fonts import */

  /* --- Escala fluid --- */
  --fs-xs: clamp(11px, 0.7vw, 12px);
  --fs-sm: clamp(13px, 0.85vw, 14px);
  --fs-base: clamp(15px, 1vw, 17px);
  --fs-md: clamp(18px, 1.2vw, 21px);
  --fs-lg: clamp(22px, 1.6vw, 28px);
  --fs-xl: clamp(32px, 3vw, 48px);
  --fs-2xl: clamp(44px, 4.5vw, 64px);
  --fs-mega: clamp(64px, 9vw, 144px);
  --fs-hero: clamp(42px, 5vw, 72px);

  /* --- Espaciado --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* --- Layout --- */
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 600ms;

  /* --- Borders --- */
  --bw-1: 1px;
  --bw-2: 2px;

  /* --- Shadows corporativas --- */
  --shadow-xs: 0 1px 2px rgba(15, 33, 56, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 33, 56, 0.06), 0 1px 2px rgba(15, 33, 56, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 33, 56, 0.08), 0 2px 6px rgba(15, 33, 56, 0.04);
  --shadow-lg: 0 18px 40px rgba(15, 33, 56, 0.10), 0 4px 12px rgba(15, 33, 56, 0.06);
  --shadow-accent: 0 12px 32px rgba(245, 130, 32, 0.30);

  /* --- Icon masks — R-007 --- */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* UIUX-027: Respeta preferencia del usuario de reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}