/* ──────────────────────────────────────────────
   Bermatu — Design tokens (fintech glass)
   Portado desde design_handoff_bermatu_redesign/references/shared/tokens.css
   ────────────────────────────────────────────── */

@import url('/static/fonts/fonts.css');

:root {
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  /* Signature pair: el firmante elige una de 2 (antes 5).
     Reduce ~120KB en ruta crítica del firmar.html. Audit H-PERF1. */
  --font-signature-script: 'Caveat', 'Brush Script MT', cursive;
  --font-signature-flow: 'Dancing Script', 'Brush Script MT', cursive;
  /* Email-safe stack para cuando @font-face no carga (Outlook desktop) */
  --font-sans-email: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Type scale (px @ 16px base) — nombrada por escala, no por uso */
  --t-display: clamp(44px, 6.5vw, 82px);
  --t-display-tracking: -0.035em;
  --t-h1: clamp(32px, 4.5vw, 56px);
  --t-h1-tracking: -0.03em;
  --t-h2: clamp(24px, 3vw, 36px);
  --t-h2-tracking: -0.025em;
  --t-h3: 22px;  --t-h3-tracking: -0.02em;
  --t-h4: 18px;  --t-h4-tracking: -0.015em;
  --t-body-lg: 17px;
  --t-body: 15px;
  --t-body-sm: 13.5px;
  --t-caption: 12.5px;
  --t-eyebrow: 11.5px;  --t-eyebrow-tracking: 0.1em;
  --t-mono: 12.5px;     --t-mono-tracking: -0.01em;

  /* Neutrals — cool subtle */
  --ink: #0A0F1E;
  --ink-2: #111733;
  --ink-3: #1A2142;
  --navy: #0F1633;
  --navy-2: #1B2451;
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-150: #ECF0F7;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;
  --white: #FFFFFF;
  --paper: #FAFBFF;

  /* Brand blue */
  --blue-50:  #EEF4FF;
  --blue-100: #DBE7FE;
  --blue-200: #BED3FD;
  --blue-300: #93B4FA;
  --blue-400: #5D8CF5;
  --blue-500: #3B6CEE;
  --blue-600: #2453DE;
  --blue-700: #1E40BC;
  --blue-800: #1D3693;
  --blue-900: #1B2F74;

  /* Brand semantic aliases — usa --brand cuando quieras "color de marca",
     no --blue-600 directamente. Facilita white-label sin refactor masivo. */
  --brand-light: var(--blue-50);
  --brand-soft:  var(--blue-100);
  --brand:       var(--blue-600);
  --brand-deep:  var(--blue-700);
  --brand-darker:var(--blue-800);

  /* Brand tenant (white-label hook) — server inyecta
     <style>:root{--brand-tenant: {{tenant.color}};}</style> ANTES del body
     SOLO si tenant.color_primario != default. Solo botones primary, accent
     bars y badges de marca lo respetan; sidebar/mesh complejos lo ignoran. */
  --brand-tenant:       var(--brand);
  --brand-tenant-deep:  var(--brand-deep);
  --brand-tenant-light: var(--brand-light);

  /* Ink variants */
  --ink-2: #111733;
  --ink-3: #1A2142;
  --navy-2: #1B2451;
  --slate-150: #ECF0F7;

  /* Accents (glass gradient stops) */
  --violet-500: #7C5CFA;
  --violet-600: #6843F2;
  --cyan-400:   #53C7FB;
  --cyan-500:   #23AEEC;
  --emerald-500:#10B981;
  --emerald-600:#059669;
  --emerald-50: #ECFDF5;
  --amber-500:  #F59E0B;
  --amber-50:   #FFFBEB;
  --rose-500:   #F43F5E;
  --rose-600:   #EF4444;
  --rose-700:   #B91C1C;   /* AA: 5.86:1 sobre #fff/rose-50 — texto de error/danger */
  --rose-800:   #991B1B;   /* hover sobre fondos claros */
  --rose-50:    #FEF2F2;

  /* Semantic */
  --text: var(--ink);
  --text-2: var(--slate-700);
  --text-3: var(--slate-500);
  --text-muted: var(--slate-400);
  --text-inv: var(--white);
  --text-error: var(--rose-700);
  --text-success: var(--emerald-600);
  --border: #E4E9F4;
  --border-2: #D7DEED;
  --border-strong: #B9C4DC;
  --bg: var(--paper);
  --bg-tint: #F5F8FF;
  --surface: var(--white);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.8);
  --glass-stroke: rgba(15, 22, 51, 0.06);
  --glass-blur: 24px;

  /* Shadows — soft, layered */
  --sh-1: 0 1px 2px rgba(15, 22, 51, 0.04), 0 1px 1px rgba(15, 22, 51, 0.03);
  --sh-2: 0 2px 4px rgba(15, 22, 51, 0.04), 0 4px 12px rgba(15, 22, 51, 0.04);
  --sh-3: 0 4px 8px rgba(15, 22, 51, 0.04), 0 12px 28px -6px rgba(15, 22, 51, 0.08);
  --sh-4: 0 8px 16px rgba(15, 22, 51, 0.06), 0 24px 48px -12px rgba(15, 22, 51, 0.12);
  --sh-glass: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 40px -8px rgba(36, 83, 222, 0.18), 0 1px 2px rgba(15,22,51,0.06);
  --sh-blue: 0 8px 24px -6px rgba(36, 83, 222, 0.35), 0 2px 6px rgba(36, 83, 222, 0.2);
  --sh-brand: var(--sh-blue);  /* alias semántico — preferir sobre --sh-blue en código nuevo */
  --sh-lg: 0 24px 60px -12px rgba(15,22,51,0.22), 0 8px 20px -4px rgba(15,22,51,0.1);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Spacing (4px base) — tokeniza valores ad-hoc del proyecto */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;
  --space-14: 160px;
  --space-15: 200px;
  --space-16: 256px;

  /* Z-index (sustituye valores ad-hoc 1/2/10/20/40/60/100/300/1000) */
  --z-base:    1;
  --z-sticky:  20;
  --z-header:  40;
  --z-overlay: 80;
  --z-modal:   100;
  --z-toast:   200;

  /* Breakpoints (uso documental — CSS no resuelve var en MQ) */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* Motion */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-out-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-in-out:   cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .18s;
  --dur: .28s;
  --dur-slow: .5s;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
  line-height: 1.5;
  letter-spacing: -0.005em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* Thin scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(15,22,51,0.15);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(15,22,51,0.28);
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* Focus visible (global) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 83, 222, 0.35);
  border-radius: var(--r-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}