/* ============================================================
   Onboarding Studio — Design Tokens
   Paleta institucional Bankingly (#FF4914 brand) + tema claro default.
   Cambios aquí impactan todo el sistema. NO hardcodear valores en componentes.
   ============================================================ */

:root {
  /* ───── Brand (institucional Bankingly) ─────────────────── */
  --color-brand:         #FF4914;
  --color-brand-hover:   #E63E0A;
  --color-brand-active:  #C8350A;
  --color-brand-soft:    rgba(255, 73, 20, 0.08);
  --color-brand-glow:    rgba(255, 73, 20, 0.20);
  --color-brand-ring:    rgba(255, 73, 20, 0.35);

  /* ───── Background (modo claro default) ─────────────────── */
  --color-bg-base:       #FAFAF7;
  --color-bg-surface:    #FFFFFF;
  --color-bg-elevated:   #F5F5F0;
  --color-bg-subtle:     #F0EFEA;
  --color-bg-overlay:    rgba(26, 26, 26, 0.45);

  /* ───── Border ───────────────────────────────────────────── */
  --color-border:        #E8E6E0;
  --color-border-strong: #D5D2C8;
  --color-border-focus:  var(--color-brand);

  /* ───── Texto ────────────────────────────────────────────── */
  --color-text:          #1A1A1A;
  --color-text-muted:    #5F6368;
  --color-text-dim:      #9AA0A6;
  --color-text-inverse:  #FFFFFF;
  --color-text-link:     var(--color-brand);

  /* ───── Acento secundario (teal — complemento al coral) ─── */
  --color-accent:        #14B8A6;
  --color-accent-hover:  #0F9D8E;
  --color-accent-soft:   rgba(20, 184, 166, 0.10);

  /* ───── Estados ──────────────────────────────────────────── */
  --color-success:       #16A34A;
  --color-success-soft:  rgba(22, 163, 74, 0.10);
  --color-warning:       #F59E0B;
  --color-warning-soft:  rgba(245, 158, 11, 0.10);
  --color-danger:        #DC2626;
  --color-danger-soft:   rgba(220, 38, 38, 0.10);
  --color-info:          #0EA5E9;
  --color-info-soft:     rgba(14, 165, 233, 0.10);

  /* ───── Tipografía ───────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --leading-tight:   1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.02em;

  /* ───── Spacing (grilla 4 px) ────────────────────────────── */
  --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 ───────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ───── Shadow ───────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.10), 0 8px 16px rgba(0, 0, 0, 0.05);
  --shadow-brand-glow: 0 0 0 1px var(--color-brand-soft), 0 0 24px var(--color-brand-glow);
  --shadow-focus: 0 0 0 3px var(--color-brand-ring);

  /* ───── Motion ───────────────────────────────────────────── */
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;
  --dur-slower: 600ms;

  /* ───── Z-index ──────────────────────────────────────────── */
  --z-base:    1;
  --z-dropdown:1000;
  --z-sticky:  1100;
  --z-fixed:   1200;
  --z-modal:   1300;
  --z-toast:   1400;
  --z-tooltip: 1500;
}

/* ───── Reduced motion: respetar preferencia del usuario ──── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-slower: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}