/* =====================================================================
   theme.css — Tokens de diseño.
   Estos valores son el DEFAULT de la marca LyraArgento.
   theme.js los sobreescribe en runtime con el branding de cada banco.
   ===================================================================== */
:root {
  /* --- Sobreescritos por branding (BD) --- */
  --primary: #2563eb;
  --secondary: #7c3aed;
  --accent: #22d3ee;
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --font: "Manrope", system-ui, sans-serif;
  --font-display: "Schibsted Grotesk", var(--font);

  /* --- Derivados / estructura --- */
  --gradient: linear-gradient(135deg, var(--primary), var(--secondary));
  --gradient-soft: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, white), color-mix(in srgb, var(--secondary) 14%, white));

  --sidebar-bg: #0a1a33;
  --sidebar-bg-2: #0f244a;
  --sidebar-text: #9fb3d9;
  --sidebar-text-strong: #ffffff;

  --bg: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --text: #0b1b33;
  --text-muted: #6b7a99;
  --border: #e6ebf4;

  --radius: 20px;
  --radius-sm: 13px;
  --radius-xs: 9px;

  --shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 10px 30px rgba(11, 27, 51, 0.06);
  --shadow-lg: 0 24px 60px -18px rgba(11, 27, 51, 0.28);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1; /* cifras tabulares para montos */
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}