/* Financias — design system v3 (contrast-refined) */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Figtree:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

:root {
  /* LIGHT — warm cream, editorial banking */
  --bg:           #ebe3d1;      /* canvas — un pelín más cálido */
  --bg-elev:      #f4eddd;      /* sidebar / chrome */
  --bg-card:      #faf4e6;      /* tarjetas principales */
  --bg-subtle:    #e0d6bc;      /* fills secundarios, progress tracks */
  --bg-sunken:    #d8cdae;      /* wells, inputs */
  --border:       #cfc1a1;      /* separadores sutiles */
  --border-strong:#a89773;      /* bordes visibles */
  --ink:          #0a0806;      /* texto principal — casi negro */
  --ink-2:        #2d2418;      /* texto secundario */
  --ink-3:        #6d5e47;      /* texto terciario */
  --ink-4:        #9e8d71;      /* disabled / subtle */
  --accent:       #7a5524;      /* acento dorado más saturado */
  --accent-ink:   #4f3616;      /* texto sobre fondo acento-soft */
  --accent-soft:  #dcc793;      /* tint para chips */
  --pos:          #2f5028;      /* verde más rico */
  --pos-soft:     #cbdab8;
  --neg:          #8a2f20;      /* rojo más saturado */
  --neg-soft:     #e8c4b7;
  --warn:         #7a5a15;
  --warn-soft:    #ead3a0;

  --radius-sm:    3px;
  --radius:       6px;
  --radius-lg:    10px;

  --shadow-sm:    0 1px 2px rgba(40,30,15,0.06);
  --shadow:       0 1px 3px rgba(40,30,15,0.07), 0 10px 28px -12px rgba(40,30,15,0.12);
  --shadow-lg:    0 30px 80px -30px rgba(40,25,10,0.28);

  --font-display: 'Newsreader', Georgia, serif;
  --font-ui:      'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

[data-theme="dark"] {
  /* DARK — deep warm espresso, high-contrast */
  --bg:           #0a0704;      /* deeper black-brown */
  --bg-elev:      #13100a;      /* chrome */
  --bg-card:      #1a1610;      /* tarjetas */
  --bg-subtle:    #221c13;      /* fills */
  --bg-sunken:    #09070400;    /* keep hollow */
  --bg-sunken:    #0e0b07;
  --border:       #2e261b;      /* separadores */
  --border-strong:#4a3e2e;      /* bordes visibles */
  --ink:          #faf1dd;      /* texto principal — casi blanco cálido */
  --ink-2:        #d9cbaa;      /* secundario */
  --ink-3:        #9e8c6e;      /* terciario — legible sobre bg */
  --ink-4:        #6a5c48;
  --accent:       #e0b675;      /* dorado luminoso */
  --accent-ink:   #f3d197;      /* sobre acento-soft oscuro */
  --accent-soft:  #3a2c17;
  --pos:          #a9c893;
  --pos-soft:     #1f2a1a;
  --neg:          #dd9080;
  --neg-soft:     #341f1a;
  --warn:         #d9b470;
  --warn-soft:    #2a1f0e;

  --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
  --shadow:       0 2px 6px rgba(0,0,0,0.35), 0 14px 40px -14px rgba(0,0,0,0.5);
  --shadow-lg:    0 40px 100px -30px rgba(0,0,0,0.7);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}

.num         { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; letter-spacing: -0.01em; }
.num-display { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 400; letter-spacing: -0.02em; white-space: nowrap; }
.serif       { font-family: var(--font-display); font-weight: 400; }
.mono        { font-family: var(--font-mono); white-space: nowrap; letter-spacing: -0.01em; }
.eyebrow     { font-size: 10px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: var(--ink-3); }

.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--ink-2);
  font-weight: 500;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; color: inherit; }

::-webkit-scrollbar           { width: 10px; height: 10px; }
::-webkit-scrollbar-track     { background: transparent; }
::-webkit-scrollbar-thumb     { background: var(--border-strong); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

.divider-dotted {
  flex: 1;
  border-bottom: 1px dotted var(--border-strong);
  margin: 0 10px;
  transform: translateY(-4px);
  opacity: 0.6;
}

.hover-row { transition: background 0.12s ease; }
.hover-row:hover { background: var(--bg-subtle); }

/* Subtle noise texture on canvas (barely perceptible, adds warmth) */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.015) 1px, transparent 0);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}
[data-theme="dark"] body::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.015) 1px, transparent 0);
  mix-blend-mode: screen;
}

/* Animate theme transitions smoothly */
html { transition: background 0.3s ease, color 0.3s ease; }