@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/instrument-sans-v4-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/instrument-sans-v4-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/instrument-sans-v4-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/instrument-sans-v4-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-v20-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-v20-latin-600.woff2") format("woff2");
}

:root {
  /* ── Base palette (brand) ─────────────────────────── */
  --booksly-gold:  #C8AD55; /* Ledger Gold  — accent, emphasis, totals */
  --booksly-teal:  #0E3B43; /* Deep Teal    — primary actions, headers, ink */
  --booksly-wine:  #481620; /* Ink Wine     — destructive, debits/negatives */
  --booksly-mist:  #E8EEF2; /* Mist         — page background */
  --booksly-steel: #C7D3DD; /* Steel        — borders, dividers, muted UI */

  /* ── Derived tints & shades ───────────────────────── */
  --teal-hover:  #0B3138;
  --teal-active: #082930;
  --teal-tint:   #E1EAEB;  /* ghost-button hover, selected rows */
  --gold-hover:  #BB9F47;
  --gold-tint:   #F3ECD8;  /* highlight fills behind totals/callouts */
  --gold-text:   #8A7430;  /* only gold legible as small text on light */
  --wine-hover:  #5A1F2B;
  --wine-text:   #6E2233;  /* negative amounts at small sizes */
  --wine-tint:   #F1E4E7;

  /* ── Neutrals ─────────────────────────────────────── */
  --paper:        #FBFCFD; /* card / table surface */
  --ink:          #122A30; /* primary text (teal-black) */
  --ink-secondary:#4C6169;
  --ink-faint:    #7C8F97; /* placeholders, disabled text */
  --line:         #C7D3DD; /* default border = steel */
  --line-soft:    #DAE3EA; /* row dividers */

  /* ── Semantic aliases ─────────────────────────────── */
  --surface-page:   var(--paper);
  --surface-card:   var(--paper);
  --surface-inset:  #DFE7ED;               /* wells, segmented-tab track */
  --text-body:      var(--ink);
  --text-muted:     var(--ink-secondary);
  --text-faint:     var(--ink-faint);
  --border-default: var(--line-soft);
  --border-strong:  var(--line);
  --accent:         var(--booksly-gold);
  --action-primary-bg:    var(--booksly-teal);
  --action-primary-fg:    #FFFFFF;
  --action-primary-hover: var(--teal-hover);
  --action-destructive-bg:var(--booksly-wine);
  --amount-positive: var(--ink);            /* credits read as normal ink */
  --amount-negative: var(--wine-text);      /* debits in wine, minus sign */
  --amount-total-bg: var(--gold-tint);
  --focus-ring: 0 0 0 3px rgba(200, 173, 85, .45); /* gold focus */

  /* ── On the teal header bar ───────────────────────── */
  --on-teal:        #FFFFFF;                /* foreground on the bar */
  --on-teal-muted:  #9FB6BB;                /* meta text and inactive tabs */
  --on-teal-border: rgba(255, 255, 255, .22); /* hairline on the bar */
  --on-teal-hover:  rgba(255, 255, 255, .10); /* hover fill on the bar */

  /* ── Typography ───────────────────────────────────── */
  --font-ui: "Instrument Sans", "Helvetica Neue", Helvetica, sans-serif;
  --font-numeric: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* all money & figures */

  --text-xs: 11px;   /* table headers (uppercase, +.06em tracking) */
  --text-sm: 12.5px; /* captions, meta */
  --text-md: 13.5px; /* default UI / table body */
  --text-lg: 15px;   /* emphasized body */
  --text-xl: 20px;   /* section titles */
  --text-2xl: 28px;  /* page titles */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── Spacing, radii, controls ─────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px;

  --radius-sm: 4px;  /* buttons, inputs, chips */
  --radius-md: 6px;  /* cards, tables */
  --radius-lg: 10px; /* modals, large panels */

  --control-sm: 28px; --control-md: 36px; --control-lg: 44px;

  --shadow-card: 0 1px 2px rgba(14, 59, 67, .06), 0 0 0 1px var(--line-soft);
  --shadow-raised: 0 4px 14px rgba(14, 59, 67, .12);
}