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

:root {
  /* Green accent — fresh, alive */
  --green-50:  oklch(0.97 0.03 155);
  --green-100: oklch(0.93 0.06 155);
  --green-200: oklch(0.87 0.11 155);
  --green-400: oklch(0.78 0.16 155);
  --green-500: oklch(0.72 0.17 155);
  --green-600: oklch(0.62 0.17 155);
  --green-700: oklch(0.48 0.14 155);
  --green-900: oklch(0.28 0.08 155);

  /* Warm neutrals */
  --bg:        oklch(0.985 0.003 95);
  --bg-soft:   oklch(0.965 0.004 95);
  --surface:   #ffffff;
  --surface-2: oklch(0.98 0.003 95);
  --border:    oklch(0.92 0.005 95);
  --border-strong: oklch(0.85 0.008 95);
  --text:      oklch(0.18 0.01 155);
  --text-muted: oklch(0.48 0.01 155);
  --text-faint: oklch(0.62 0.008 155);

  /* Semantic */
  --success: var(--green-600);
  --warn:    oklch(0.78 0.15 75);
  --danger:  oklch(0.62 0.19 25);
  --info:    oklch(0.68 0.12 230);

  /* Shape */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-xs: 0 1px 2px oklch(0.1 0.01 155 / 0.04);
  --shadow-sm: 0 2px 6px oklch(0.1 0.01 155 / 0.05), 0 1px 2px oklch(0.1 0.01 155 / 0.04);
  --shadow-md: 0 8px 24px -8px oklch(0.1 0.01 155 / 0.10), 0 2px 6px oklch(0.1 0.01 155 / 0.05);
  --shadow-lg: 0 20px 50px -20px oklch(0.1 0.01 155 / 0.18);
}

.dark {
  --bg:        oklch(0.16 0.01 155);
  --bg-soft:   oklch(0.19 0.012 155);
  --surface:   oklch(0.21 0.013 155);
  --surface-2: oklch(0.24 0.014 155);
  --border:    oklch(0.28 0.012 155);
  --border-strong: oklch(0.35 0.014 155);
  --text:      oklch(0.97 0.005 95);
  --text-muted: oklch(0.72 0.008 95);
  --text-faint: oklch(0.55 0.008 95);
  --shadow-md: 0 8px 24px -8px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 20px 50px -20px rgb(0 0 0 / 0.6);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

.mono { font-family: 'Geist Mono', ui-monospace, monospace; font-feature-settings: 'tnum', 'zero'; }
.tnum { font-variant-numeric: tabular-nums; }

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

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 500; font-size: 14px;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--green-600); color: white;
}
.btn-primary:hover { background: var(--green-700); transform: translateY(-1px); box-shadow: 0 4px 12px oklch(0.62 0.17 155 / 0.35); }
.btn-ghost {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.btn-dark {
  background: var(--text); color: var(--bg);
}
.btn-dark:hover { opacity: 0.9; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
}

.card-tight { padding: 18px; }

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.chip-green { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.dark .chip-green { background: color-mix(in oklch, var(--green-600) 15%, transparent); color: var(--green-400); border-color: color-mix(in oklch, var(--green-600) 25%, transparent); }
.chip-red { background: oklch(0.96 0.02 25); color: var(--danger); border-color: oklch(0.92 0.04 25); }
.dark .chip-red { background: color-mix(in oklch, var(--danger) 15%, transparent); color: oklch(0.78 0.18 25); border-color: color-mix(in oklch, var(--danger) 25%, transparent); }

/* Pill nav */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.seg button {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
  transition: all .15s;
}
.seg button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.dark .seg button.active { background: var(--bg-soft); }

/* Inputs */
.input {
  width: 100%;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--text);
  transition: border-color .15s;
}
.input:focus { outline: none; border-color: var(--green-500); }

/* Utility layout */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* Sparkline dots */
.dot-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 0 var(--green-500);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--green-500) 60%, transparent); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Skeleton */
.skel { background: linear-gradient(90deg, var(--border) 0%, var(--bg-soft) 50%, var(--border) 100%); background-size: 200% 100%; animation: sheen 1.5s infinite; border-radius: 8px; }
@keyframes sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Focus ring */
:focus-visible { outline: 2px solid var(--green-500); outline-offset: 2px; border-radius: 4px; }

/* Smooth page transitions */
.page-enter { animation: pageIn .25s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }