/* Autostudio — design tokens fintech (Fase 1 rediseño).
   Oscuro por defecto; claro con data-theme="light" + toggle manual.
   Mismos nombres de variable que antes: tables.css y forms.css siguen funcionando. */

:root{
  color-scheme:dark;
  --paper:#0B0F14;
  --surface:#111722;
  --surface-2:#18202E;
  --ink:#EDF1F7;
  --ink-dim:#9AA7B8;
  --ink-faint:#5D6B7E;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.16);
  --accent:#2DD4A7;
  --accent-strong:#5EE8C0;
  --accent-soft:rgba(45,212,167,.12);
  --positive:#2DD4A7;
  --positive-soft:rgba(45,212,167,.12);
  --negative:#FF6B6B;
  --negative-soft:rgba(255,107,107,.12);
  --warning:#FFC24B;
  --warning-soft:rgba(255,194,75,.13);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(45,212,167,.25),0 0 24px -6px rgba(45,212,167,.35);
  --radius:16px;
  --radius-sm:10px;
  --font-ui:'Work Sans',system-ui,-apple-system,sans-serif;
  --font-display:'Fraunces',serif;
  --font-num:'IBM Plex Mono',ui-monospace,monospace;
  --nav-h:68px;
}

:root[data-theme="light"]{
  color-scheme:light;
  --paper:#F4F2EC;
  --surface:#FFFFFF;
  --surface-2:#FAF8F2;
  --ink:#1B2320;
  --ink-dim:#5F6D66;
  --ink-faint:#93A19A;
  --line:#E2DAC7;
  --line-strong:#C9C0AC;
  --accent:#1E7A5F;
  --accent-strong:#14573F;
  --accent-soft:#DFF0E7;
  --positive:#1E8A55;
  --positive-soft:#DFF3E7;
  --negative:#C0362F;
  --negative-soft:#FBE7E4;
  --warning:#96690E;
  --warning-soft:#F6ECD4;
  --shadow:0 1px 2px rgba(28,35,33,.07),0 10px 28px -14px rgba(28,35,33,.18);
  --glow:0 0 0 1px rgba(30,122,95,.18),0 0 22px -8px rgba(30,122,95,.25);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 500px at 85% -10%,rgba(45,212,167,.07),transparent 60%),
    var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:clip;
}
:root[data-theme="light"] body{background:var(--paper);}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;}

.wrap{max-width:1220px;margin:0 auto;padding:22px 22px 64px;}
@media (max-width:820px){.wrap{padding:16px 14px 120px;}}

/* Foco visible para teclado (accesibilidad) */
:focus-visible{outline:2px solid var(--warning);outline-offset:2px;border-radius:6px;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}