/* ===================== RESET ===================== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg { display: block; }
  button, input, select, textarea { font: inherit; color: inherit; }
  ul { list-style: none; }

  /* ===================== TOKENS ===================== */
  :root {
    --ink-navy: #10302B;
    --ink-navy-light: #1B4A40;
    --ink-navy-soft: #E6ECEA;
    --paper: #FBFAF5;
    --paper-panel: #FFFFFF;
    --paper-alt: #F1EEE3;
    --gold: #C89B3C;
    --gold-soft: #EFE0BA;
    --ink-text: #1C1B18;
    --ink-muted: #6E6A5C;
    --line: #E1DDCE;
    --status-paid: #2F6F4E;
    --status-paid-bg: #E4F0E7;
    --status-pending: #A9721F;
    --status-pending-bg: #FBF0DA;
    --status-partial: #43536E;
    --status-partial-bg: #E9EDF3;
    --danger: #A23B33;
    --danger-bg: #F5E4E2;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    --sidebar-w: 258px;
    --radius: 7px;
    --shadow-card: 0 1px 2px rgba(16,48,43,0.06), 0 6px 20px rgba(16,48,43,0.05);
  }

  body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink-text);
    line-height: 1.5;
    font-size: 15px;
  }

  a { color: inherit; }

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

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }