/* ============================================================
   Swiftcode-Sistema-visual
   Sistema de diseño y tokens de producción
   Inspirado en Claridad Líquida H2U
   ============================================================ */

:root {
  /* ── Tipografía (Montserrat como fuente principal) ────────── */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --font-portada: 'Montserrat', system-ui, sans-serif;

  /* ── Aqua · Primario y Acción ───────────────────────────── */
  --aqua-50:  #ecf8ff;
  --aqua-100: #d3eefe;
  --aqua-200: #b0e2fd;
  --aqua-300: #7dd0fb;
  --aqua-400: #41b8f7;
  --aqua-500: #08a4f4; /* Acción primaria y superficie */
  --aqua-600: #0784d0; /* Hover primario */
  --aqua-700: #0a68a8; /* Enlaces y textos sobre claros */
  --aqua-800: #0e5688;
  --aqua-900: #0c456e;

  /* ── Navy · Estructura y Tinta Institucional ────────────── */
  --navy-600: #0a3a6b;
  --navy-700: #073461;
  --navy-800: #052b50;
  --navy-900: #002855; /* Institucional / Titulares */
  --navy-950: #001a3a; /* Fondo profundo base */

  /* ── Índigo · Acento Profundo ───────────────────────────── */
  --indigo-600: #1a36b0;
  --indigo-700: #081c8c;

  /* ── Oro · Valor y Recompensa ───────────────────────────── */
  --gold-50:  #fff8e8;
  --gold-100: #ffeec2;
  --gold-200: #ffdd8a;
  --gold-300: #ffca52;
  --gold-400: #ffb524;
  --gold-500: #f9ab00; /* Botón destacado */
  --gold-600: #d98a00;
  --gold-700: #a86600; /* Texto legible sobre blanco */

  /* ── Superficies ─────────────────────────────────────────── */
  --cream: #fbf3d5;
  --sand:  #f3ead0;
  --paper: #fffdf8; /* Fondo estándar de tarjetas */
  --mist:  #f4f9fd; /* Fondo de paneles fríos */
  --white: #ffffff; /* Campos de formulario y tarjetas sobre crema */

  /* ── Tinta y Líneas (Sesgo azul, nunca gris neutro) ──────── */
  --ink:       #0b2a4a; /* Texto base de lectura */
  --muted:     #5d7088; /* Texto secundario */
  --faint:     #93a4b8; /* Metadatos / placeholders */
  --line:      #e8edf3; /* Filetes suaves */
  --line-cool: #dbe7f1; /* Filetes fríos e inputs */

  /* ── Estados ─────────────────────────────────────────────── */
  --success:      #2f9e44;
  --success-soft: #e6f4ea;
  --warning:      #f9ab00;
  --danger:       #e5484d;
  --danger-soft:  #fdecec;

  /* ── Radios de Esquina ──────────────────────────────────── */
  --radius-sm:  0.5rem;   /* 8px */
  --radius-md:  0.875rem; /* 14px - Controles e inputs */
  --radius-lg:  1.25rem;  /* 20px - Tarjetas */
  --radius-xl:  1.75rem;  /* 28px */
  --radius-2xl: 2.25rem;  /* 36px - Paneles */
  --radius-full: 999px;   /* Píldoras / Botones */

  /* ── Sombras Teñidas en Navy ────────────────────────────── */
  --shadow-soft:  0 1px 2px rgba(0,40,85,.04), 0 8px 24px -12px rgba(0,40,85,.12);
  --shadow-card:  0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(0,40,85,.05), 0 18px 40px -24px rgba(0,40,85,.28);
  --shadow-float: 0 24px 60px -28px rgba(0,40,85,.45);
  --shadow-glow:  0 0 0 1px rgba(8,164,244,.18), 0 18px 50px -18px rgba(8,164,244,.55);
  --shadow-gold:  0 14px 36px -16px rgba(249,171,0,.6);
}

/* ── Botones Píldora (Scoped) ───────────────────────────── */
:root[data-ui-style="swiftcode"] .btn,
.landing-page .btn,
.auth-page .btn,
.onboarding-wizard .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all 0.2s ease-out;
}

:root[data-ui-style="swiftcode"] .btn:active,
.landing-page .btn:active,
.auth-page .btn:active,
.onboarding-wizard .btn:active {
  transform: translateY(1px);
}

:root[data-ui-style="swiftcode"] .btn-sm,
.landing-page .btn-sm,
.auth-page .btn-sm,
.onboarding-wizard .btn-sm {
  height: 36px;
  padding: 0 16px;
  font-size: 0.875rem;
}

:root[data-ui-style="swiftcode"] .btn-md,
.landing-page .btn-md,
.auth-page .btn-md,
.onboarding-wizard .btn-md {
  height: 44px;
  padding: 0 20px;
  font-size: 0.95rem;
}

:root[data-ui-style="swiftcode"] .btn-lg,
.landing-page .btn-lg,
.auth-page .btn-lg,
.onboarding-wizard .btn-lg {
  height: 52px;
  padding: 0 28px;
  font-size: 1rem;
}

:root[data-ui-style="swiftcode"] .btn-primary,
:root[data-ui-style="swiftcode"] .btn-glow,
.landing-page .btn-primary, .landing-page .btn-glow,
.auth-page .btn-primary, .auth-page .btn-glow,
.onboarding-wizard .btn-primary, .onboarding-wizard .btn-glow {
  color: #ffffff;
  background: var(--aqua-500);
  box-shadow: 0 10px 24px -10px rgba(8, 164, 244, 0.8);
}

:root[data-ui-style="swiftcode"] .btn-primary:hover,
:root[data-ui-style="swiftcode"] .btn-glow:hover,
.landing-page .btn-primary:hover, .landing-page .btn-glow:hover,
.auth-page .btn-primary:hover, .auth-page .btn-glow:hover,
.onboarding-wizard .btn-primary:hover, .onboarding-wizard .btn-glow:hover {
  background: var(--aqua-600);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(8, 164, 244, 0.9);
  color: #ffffff;
}

:root[data-ui-style="swiftcode"] .btn-gold,
.landing-page .btn-gold,
.auth-page .btn-gold,
.onboarding-wizard .btn-gold {
  color: var(--navy-950);
  background: var(--gold-500);
  box-shadow: var(--shadow-gold);
}

:root[data-ui-style="swiftcode"] .btn-gold:hover,
.landing-page .btn-gold:hover,
.auth-page .btn-gold:hover,
.onboarding-wizard .btn-gold:hover {
  background: var(--gold-400);
  transform: translateY(-2px);
  color: var(--navy-950);
}

:root[data-ui-style="swiftcode"] .btn-dark,
.landing-page .btn-dark,
.auth-page .btn-dark,
.onboarding-wizard .btn-dark {
  color: #ffffff;
  background: var(--navy-900);
  box-shadow: var(--shadow-soft);
}

:root[data-ui-style="swiftcode"] .btn-dark:hover,
.landing-page .btn-dark:hover,
.auth-page .btn-dark:hover,
.onboarding-wizard .btn-dark:hover {
  background: var(--navy-800);
  transform: translateY(-2px);
  color: #ffffff;
}

:root[data-ui-style="swiftcode"] .btn-outline,
.landing-page .btn-outline,
.auth-page .btn-outline,
.onboarding-wizard .btn-outline {
  color: var(--navy-900);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 40, 85, 0.15);
}

:root[data-ui-style="swiftcode"] .btn-outline:hover,
.landing-page .btn-outline:hover,
.auth-page .btn-outline:hover,
.onboarding-wizard .btn-outline:hover {
  color: var(--aqua-700);
  background: var(--aqua-50);
  box-shadow: inset 0 0 0 1px var(--aqua-500);
}

:root[data-ui-style="swiftcode"] .btn-ghost,
.landing-page .btn-ghost,
.auth-page .btn-ghost,
.onboarding-wizard .btn-ghost {
  color: var(--navy-800);
  background: transparent;
}

:root[data-ui-style="swiftcode"] .btn-ghost:hover,
.landing-page .btn-ghost:hover,
.auth-page .btn-ghost:hover,
.onboarding-wizard .btn-ghost:hover {
  background: rgba(0, 40, 85, 0.05);
  color: var(--navy-900);
}

/* ── Insignias (Badges - Scoped) ──────────────────────────── */
:root[data-ui-style="swiftcode"] .badge,
.landing-page .badge,
.auth-page .badge,
.onboarding-wizard .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-full);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

:root[data-ui-style="swiftcode"] .badge .dot,
.landing-page .badge .dot,
.auth-page .badge .dot,
.onboarding-wizard .badge .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}

:root[data-ui-style="swiftcode"] .b-aqua,
.landing-page .b-aqua,
.auth-page .b-aqua,
.onboarding-wizard .b-aqua {
  background: var(--aqua-50);
  color: var(--aqua-700);
  box-shadow: inset 0 0 0 1px var(--aqua-200);
}

:root[data-ui-style="swiftcode"] .b-gold,
.landing-page .b-gold,
.auth-page .b-gold,
.onboarding-wizard .b-gold {
  background: var(--gold-50);
  color: var(--gold-700);
  box-shadow: inset 0 0 0 1px var(--gold-200);
}

:root[data-ui-style="swiftcode"] .b-ok,
.landing-page .b-ok,
.auth-page .b-ok,
.onboarding-wizard .b-ok {
  background: var(--success-soft);
  color: var(--success);
  box-shadow: inset 0 0 0 1px rgba(47, 158, 68, 0.2);
}

:root[data-ui-style="swiftcode"] .b-mut,
.landing-page .b-mut,
.auth-page .b-mut,
.onboarding-wizard .b-mut {
  background: rgba(0, 40, 85, 0.05);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(0, 40, 85, 0.1);
}

:root[data-ui-style="swiftcode"] .b-dan,
.landing-page .b-dan,
.auth-page .b-dan,
.onboarding-wizard .b-dan {
  background: var(--danger-soft);
  color: var(--danger);
  box-shadow: inset 0 0 0 1px rgba(229, 72, 77, 0.2);
}

:root[data-ui-style="swiftcode"] .b-navy,
.landing-page .b-navy,
.auth-page .b-navy,
.onboarding-wizard .b-navy {
  background: var(--navy-900);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* ── Superficie Fondo Profundo ────────────────────────────── */
.surface-deep {
  position: relative;
  overflow: hidden;
  background-color: var(--navy-900);
  background-image:
    radial-gradient(38rem 30rem at 18% 12%, rgba(8, 164, 244, 0.55), transparent 60%),
    radial-gradient(30rem 26rem at 88% 8%, rgba(8, 132, 208, 0.45), transparent 55%),
    radial-gradient(34rem 30rem at 70% 110%, rgba(8, 28, 140, 0.6), transparent 60%),
    linear-gradient(160deg, #04305f 0%, #002855 45%, #001a3a 100%);
  color: #ffffff;
  box-shadow: var(--shadow-float);
}

.surface-deep::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

/* ── Utilidades Tipográficas ──────────────────────────────── */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.font-mono {
  font-family: var(--font-mono);
}

.font-display {
  font-family: var(--font-display);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}