/* ==========================================================================
   ADMI Design System — tokens
   Copia fiel de _ds/admi-design-system-48f7847c-b3c7-4355-8644-8d0ae35d4e66/
   (colors.css + typography.css + spacing.css + effects.css)

   La familia tipográfica (Plus Jakarta Sans) se carga desde index.html con
   <link rel="preconnect"> + <link rel="stylesheet"> en lugar de @import,
   que bloquea el render.
   ========================================================================== */

:root {
  /* --- colors ------------------------------------------------------------ */
  --coral-50: #FFF1F1;
  --coral-100: #FFE1E1;
  --coral-200: #FFC7C7;
  --coral-300: #FFA3A3;
  --coral-400: #FF8585;
  --coral-500: #FF6B6B;
  --coral-600: #F04A4A;
  --coral-700: #D63333;
  --coral-800: #B02626;
  --coral-900: #8F2020;

  --ink-50: #F6F7F9;
  --ink-100: #ECEDF1;
  --ink-200: #D9DBE3;
  --ink-300: #B6B9C6;
  --ink-400: #8B8FA3;
  --ink-500: #646880;
  --ink-600: #484C61;
  --ink-700: #33364A;
  --ink-800: #242636;
  --ink-900: #1A1C23;

  --success: #2FBF71;
  --success-bg: rgba(47, 191, 113, .1);
  --warning: #F5A524;
  --warning-bg: rgba(245, 165, 36, .1);
  --error: #E5484D;
  --error-bg: rgba(229, 72, 77, .1);
  --info: #3E7BFA;
  --info-bg: rgba(62, 123, 250, .1);

  --primary: var(--coral-500);
  --primary-hover: var(--coral-600);
  --primary-soft: rgba(255, 107, 107, .1);
  --secondary: var(--ink-900);

  --gradient-coral: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
  --gradient-premium: linear-gradient(135deg, #1A1C23 0%, #33364A 55%, #484C61 100%);
  --gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #F6F7F9 100%);

  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-400);
  --text-inverse: #FFFFFF;
  --text-on-primary: #FFFFFF;
  --text-link: var(--coral-600);

  --surface-page: #F6F7F9;
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-inverse: var(--ink-900);
  --surface-input: #FFFFFF;
  --surface-hover: var(--ink-50);

  --border-default: var(--ink-200);
  --border-subtle: var(--ink-100);
  --border-strong: var(--ink-300);
  --border-focus: var(--coral-500);

  /* --- typography -------------------------------------------------------- */
  --font-display: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-h1: 32px;
  --lh-h1: 40px;
  --text-h2: 26px;
  --lh-h2: 34px;
  --text-h3: 21px;
  --lh-h3: 28px;
  --text-h4: 17px;
  --lh-h4: 24px;
  --text-body-lg: 17px;
  --lh-body-lg: 26px;
  --text-body: 15px;
  --lh-body: 23px;
  --text-body-sm: 13px;
  --lh-body-sm: 20px;
  --text-caption: 12px;
  --lh-caption: 16px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;

  /* --- spacing ----------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  --container-web: 1200px;
  --container-narrow: 760px;
  --tap-target: 44px;

  /* --- effects ----------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(26, 28, 35, .06);
  --shadow-md: 0 4px 12px rgba(26, 28, 35, .08), 0 1px 3px rgba(26, 28, 35, .05);
  --shadow-lg: 0 12px 32px rgba(26, 28, 35, .12), 0 2px 6px rgba(26, 28, 35, .06);
  --shadow-coral: 0 8px 20px rgba(255, 107, 107, .35);
  --shadow-focus: 0 0 0 3px rgba(255, 107, 107, .25);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;

  --blur-glass: saturate(180%) blur(16px);
}