/* ============================================================
   OnTrade Design Tokens
   "Inteligencia que camina contigo"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand (Azul Acero — profesional) ---------- */
  --ot-brand-500: #3B6EE0;     /* OnTrade azul — acento principal */
  --ot-brand-600: #2D5BC9;
  --ot-brand-700: #2449A8;
  --ot-brand-400: #6189E8;
  --ot-brand-300: #9CB4F0;
  --ot-brand-100: #E0EAFB;
  --ot-brand-50:  #F2F6FE;

  /* Accent secundario — verde "on-trade / camino" (sin cambios) */
  --ot-accent-500: #2FB27A;
  --ot-accent-100: #DBF4E8;

  /* ---------- Neutrals (slate con tinte cálido) ---------- */
  --ot-slate-950: #0B0D12;
  --ot-slate-900: #12151C;
  --ot-slate-800: #1B1F2A;
  --ot-slate-700: #2A3040;
  --ot-slate-600: #434A5E;
  --ot-slate-500: #6B7388;
  --ot-slate-400: #9199AE;
  --ot-slate-300: #C3C9D6;
  --ot-slate-200: #E1E5EE;
  --ot-slate-100: #EFF1F6;
  --ot-slate-50:  #F7F8FB;
  --ot-white:     #FFFFFF;

  /* ---------- Semantic ---------- */
  --ot-danger-500:  #E5484D;
  --ot-danger-100:  #FDE4E5;
  --ot-warning-500: #F59E0B;
  --ot-warning-100: #FEF3C7;
  --ot-success-500: #2FB27A;
  --ot-success-100: #DBF4E8;
  --ot-info-500:    #3B82F6;
  --ot-info-100:    #DBEAFE;
  /* Violeta — procedencia "desde IC" (spec 004, plan D-B) */
  --ot-violet-500:  #5B3FB8;
  --ot-violet-100:  #F3EEFE;

  /* ---------- Surfaces / tokens LIGHT theme (default) ---------- */
  --ot-bg:            var(--ot-slate-50);
  --ot-bg-elevated:   var(--ot-white);
  --ot-surface:       var(--ot-white);
  --ot-surface-muted: var(--ot-slate-100);
  --ot-border:        var(--ot-slate-200);
  --ot-border-strong: var(--ot-slate-300);
  --ot-fg:            var(--ot-slate-900);
  --ot-fg-muted:      var(--ot-slate-500);
  --ot-fg-subtle:     var(--ot-slate-400);
  --ot-focus-ring:    color-mix(in oklab, var(--ot-brand-500) 40%, transparent);

  /* ---------- Typography ---------- */
  --ot-font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ot-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ot-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ot-fs-xs:   0.75rem;   /* 12 */
  --ot-fs-sm:   0.8125rem; /* 13 */
  --ot-fs-base: 0.9375rem; /* 15 */
  --ot-fs-md:   1rem;      /* 16 */
  --ot-fs-lg:   1.125rem;  /* 18 */
  --ot-fs-xl:   1.375rem;  /* 22 */
  --ot-fs-2xl:  1.75rem;   /* 28 */
  --ot-fs-3xl:  2.25rem;   /* 36 */
  --ot-fs-4xl:  3rem;      /* 48 */

  --ot-lh-tight: 1.15;
  --ot-lh-snug:  1.3;
  --ot-lh-normal: 1.5;
  --ot-lh-relaxed: 1.6;

  --ot-tracking-tight: -0.022em;
  --ot-tracking-normal: 0;
  --ot-tracking-wide: 0.04em;

  --ot-fw-regular: 400;
  --ot-fw-medium: 500;
  --ot-fw-semibold: 600;
  --ot-fw-bold: 700;

  /* ---------- Spacing (Tailwind-aligned) ---------- */
  --ot-sp-0:  0;
  --ot-sp-1:  0.25rem;
  --ot-sp-2:  0.5rem;
  --ot-sp-3:  0.75rem;
  --ot-sp-4:  1rem;
  --ot-sp-5:  1.25rem;
  --ot-sp-6:  1.5rem;
  --ot-sp-8:  2rem;
  --ot-sp-10: 2.5rem;
  --ot-sp-12: 3rem;
  --ot-sp-16: 4rem;
  --ot-sp-20: 5rem;

  /* ---------- Radii ---------- */
  --ot-radius-xs: 4px;
  --ot-radius-sm: 6px;
  --ot-radius-md: 10px;
  --ot-radius-lg: 14px;
  --ot-radius-xl: 20px;
  --ot-radius-2xl: 28px;
  --ot-radius-full: 999px;

  /* ---------- Shadows ---------- */
  --ot-shadow-xs: 0 1px 2px rgba(14, 18, 28, 0.06);
  --ot-shadow-sm: 0 1px 2px rgba(14, 18, 28, 0.04), 0 2px 4px rgba(14, 18, 28, 0.04);
  --ot-shadow-md: 0 4px 12px rgba(14, 18, 28, 0.06), 0 2px 4px rgba(14, 18, 28, 0.04);
  --ot-shadow-lg: 0 12px 32px rgba(14, 18, 28, 0.08), 0 4px 8px rgba(14, 18, 28, 0.04);
  --ot-shadow-xl: 0 24px 48px rgba(14, 18, 28, 0.12), 0 8px 16px rgba(14, 18, 28, 0.06);
  --ot-shadow-brand: 0 10px 28px color-mix(in oklab, var(--ot-brand-500) 30%, transparent);

  /* ---------- Motion ---------- */
  --ot-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ot-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ot-dur-fast: 120ms;
  --ot-dur-base: 200ms;
  --ot-dur-slow: 360ms;
}

/* ---------- Dark theme ---------- */
[data-theme="dark"] {
  --ot-bg:            var(--ot-slate-950);
  --ot-bg-elevated:   var(--ot-slate-900);
  --ot-surface:       var(--ot-slate-900);
  --ot-surface-muted: var(--ot-slate-800);
  --ot-border:        color-mix(in oklab, var(--ot-slate-700) 80%, transparent);
  --ot-border-strong: var(--ot-slate-600);
  --ot-fg:            #F1F3F8;
  --ot-fg-muted:      #9199AE;
  --ot-fg-subtle:     #6B7388;
  --ot-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --ot-shadow-sm: 0 2px 6px rgba(0,0,0,0.35);
  --ot-shadow-md: 0 6px 16px rgba(0,0,0,0.4);
  --ot-shadow-lg: 0 16px 36px rgba(0,0,0,0.5);
  --ot-shadow-xl: 0 28px 60px rgba(0,0,0,0.6);
}

/* ============================================================
   Semantic classes (drop-in helpers — use tokens directly in Tailwind)
   ============================================================ */
html, body { background: var(--ot-bg); color: var(--ot-fg); font-family: var(--ot-font-sans); font-size: var(--ot-fs-base); line-height: var(--ot-lh-normal); -webkit-font-smoothing: antialiased; }

.ot-display { font-family: var(--ot-font-display); font-size: var(--ot-fs-4xl); font-weight: var(--ot-fw-semibold); letter-spacing: var(--ot-tracking-tight); line-height: var(--ot-lh-tight); }
.ot-h1 { font-family: var(--ot-font-display); font-size: var(--ot-fs-3xl); font-weight: var(--ot-fw-semibold); letter-spacing: var(--ot-tracking-tight); line-height: var(--ot-lh-tight); }
.ot-h2 { font-family: var(--ot-font-display); font-size: var(--ot-fs-2xl); font-weight: var(--ot-fw-semibold); letter-spacing: var(--ot-tracking-tight); line-height: var(--ot-lh-snug); }
.ot-h3 { font-family: var(--ot-font-display); font-size: var(--ot-fs-xl); font-weight: var(--ot-fw-semibold); line-height: var(--ot-lh-snug); }
.ot-lead { font-size: var(--ot-fs-lg); font-weight: var(--ot-fw-regular); color: var(--ot-fg-muted); line-height: var(--ot-lh-relaxed); }
.ot-body { font-size: var(--ot-fs-base); line-height: var(--ot-lh-normal); }
.ot-small { font-size: var(--ot-fs-sm); color: var(--ot-fg-muted); }
.ot-eyebrow { font-size: var(--ot-fs-xs); text-transform: uppercase; letter-spacing: var(--ot-tracking-wide); font-weight: var(--ot-fw-semibold); color: var(--ot-fg-muted); }
.ot-mono { font-family: var(--ot-font-mono); font-size: var(--ot-fs-sm); }

/* ============================================================
   Bootstrap 5.3 theming bridge (solo activo con .ot-theme-new)
   Mapea tokens OnTrade a las CSS vars nativas de Bootstrap.
   Scoped a .ot-theme-new para activación por usuario.
   ============================================================ */
.ot-theme-new {
  --bs-primary:              var(--ot-brand-500);
  --bs-primary-rgb:          109, 94, 248;
  --bs-link-color:           var(--ot-brand-500);
  --bs-link-color-rgb:       109, 94, 248;
  --bs-link-hover-color:     var(--ot-brand-600);
  --bs-body-font-family:     var(--ot-font-sans);
  --bs-body-font-size:       var(--ot-fs-base);
  --bs-body-color:           var(--ot-fg);
  --bs-body-bg:              var(--ot-bg);
  --bs-secondary-color:      var(--ot-fg-muted);
  --bs-border-color:         var(--ot-border);
  --bs-border-radius:        var(--ot-radius-md);
  --bs-border-radius-sm:     var(--ot-radius-sm);
  --bs-border-radius-lg:     var(--ot-radius-lg);
  --bs-border-radius-xl:     var(--ot-radius-xl);
  --bs-card-border-radius:   var(--ot-radius-lg);
  --bs-card-border-color:    var(--ot-border);
  --bs-card-bg:              var(--ot-surface);
  --bs-card-cap-bg:          var(--ot-surface-muted);
  --bs-card-box-shadow:      var(--ot-shadow-sm);
  --bs-modal-border-radius:  var(--ot-radius-xl);
  --bs-modal-content-bg:     var(--ot-surface);
  --bs-modal-content-border-color: var(--ot-border);
  --bs-dropdown-bg:          var(--ot-bg-elevated);
  --bs-dropdown-border-color: var(--ot-border);
  --bs-dropdown-box-shadow:  var(--ot-shadow-md);
  --bs-dropdown-border-radius: var(--ot-radius-lg);
  --bs-dropdown-link-hover-bg: var(--ot-surface-muted);
  --bs-dropdown-link-color:  var(--ot-fg);
}