/* ================================================================
   LOAN TRACKER — BASE
   Archaic Infotech brand: Navy #162040 | Blue #1D6FDB | Bright #2B83F0
   Fonts: Space Grotesk (headings, numbers) · Inter (body) · Space Mono (labels)
   ================================================================ */

:root {
  color-scheme: light;

  /* Backgrounds */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-alt: #F8FAFC;
  --bg-blue-tint: #EFF6FF;

  /* Brand */
  --navy: #162040;
  --primary: #1D6FDB;
  --primary-dark: #1558B8;
  --primary-light: #2B83F0;
  --accent: #0EA5E9;
  --green: #10B981;
  --red: #DC2626;

  /* Text */
  --text: #0F172A;
  --text-medium: #334155;
  --muted: #64748B;
  --text-light: #94A3B8;

  /* Borders */
  --border: rgba(29,111,219,0.1);
  --border-medium: rgba(29,111,219,0.2);
  --grid-line: #E2E8F0;

  /* Gradients */
  --grad-primary: linear-gradient(135deg,#1D6FDB 0%,#2B83F0 60%,#5BA4F5 100%);
  --grad-text: linear-gradient(135deg,#1D6FDB 0%,#2B83F0 50%,#0EA5E9 100%);

  /* Shadows */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 4px 16px rgba(29,111,219,0.08);
  --shadow-md: 0 8px 32px rgba(29,111,219,0.12);
  --shadow-blue: 0 8px 32px rgba(29,111,219,0.25);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.06),0 4px 20px rgba(29,111,219,0.06);

  /* Radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  --trans: all 0.3s cubic-bezier(0.4,0,0.2,1);

  /* Schedule / status colours */
  --paid-bg: #D1FAE5;
  --paid: #047857;
  --partial-bg: #FEF3C7;
  --partial: #B45309;
  --due-bg: #DBEAFE;
  --due: #1D6FDB;
  --overdue-bg: #FEE2E2;
  --overdue: #DC2626;
  --upcoming-bg: #EFF6FF;
  --none-bg: #F1F5F9;
  --interest: #F59E0B;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 'Inter', system-ui, -apple-system, sans-serif;
}
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; margin: 0; color: var(--text); }
h2 { font-size: 16px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; display: block; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.pre { white-space: pre-wrap; }
.text-alert { color: var(--overdue); font-weight: 600; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }