/* JVD Bookkeeping — webfonts
   SUBSTITUTION NOTE: Spectral, IBM Plex Sans and IBM Plex Mono are loaded from the
   Google Fonts CDN. If JVD has licensed print/brand faces, replace these @import lines
   with local @font-face rules pointing at the binaries in assets/fonts/. */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
/* JVD Bookkeeping — Color system
   Monochromatic pine/teal anchored on the logo pine #183536, warm paper canvas,
   single warm brass accent (#bd9245), and financial semantic colors.
   Base values first, semantic aliases second. */
:root {
  /* ---- Pine / teal ramp (brand core) ---- */
  --pine-900: #102526;   /* deepest, near-black pine */
  --pine-800: #183536;   /* ANCHOR — sampled from logo */
  --pine-700: #214746;
  --pine-600: #2c5b58;
  --pine-500: #3a726d;   /* primary interactive teal */
  --pine-400: #558b85;
  --pine-300: #83ada7;
  --pine-200: #b6d0cb;
  --pine-100: #dbe8e4;
  --pine-50:  #eef4f1;

  /* ---- Brass (single warm accent) ---- */
  --brass-700: #8a6524;
  --brass-600: #a37c34;   /* accent active / press */
  --brass-500: #bd9245;   /* accent base */
  --brass-300: #d9bd86;
  --brass-100: #f1e6cf;   /* brass tint fill */

  /* ---- Warm paper neutrals ---- */
  --paper-0:  #ffffff;    /* statement / report white */
  --paper-50: #faf8f3;    /* canvas — warm paper */
  --paper-100:#f4f1ea;    /* sunk surface */
  --paper-200:#ebe7dd;    /* strong sunk / rails */

  /* ---- Ink / text greys (warm pine-tinted) ---- */
  --ink-900: #142b2c;
  --ink-800: #234848;
  --ink-600: #46605c;
  --ink-500: #5f736f;
  --ink-400: #869590;

  /* ---- Hairlines ---- */
  --line-strong: #d7ddd7;
  --line:        #e3e6df;
  --line-soft:   #edefe9;

  /* ---- Financial semantics ---- */
  --pos-600: #1f7a56;    /* positive / gain — pine-family green */
  --pos-500: #2f8f6b;
  --pos-100: #dff0e7;
  --neg-600: #a8433a;    /* negative / loss — warm brick */
  --neg-500: #c0554a;
  --neg-100: #f6e2df;
  --warn-500: #c99a3f;   /* caution (shares brass family) */
  --warn-100: #f5ead2;
  --info-500: #3a726d;   /* info reuses teal */
  --info-100: #dbe8e4;

  /* =====================================================
     SEMANTIC ALIASES — reference these in components
     ===================================================== */
  --brand-primary:        var(--pine-500);
  --brand-primary-strong: var(--pine-700);
  --brand-ink:            var(--pine-800);
  --brand-accent:         var(--brass-500);
  --brand-accent-strong:  var(--brass-600);

  --bg-canvas:      var(--paper-50);
  --bg-surface:     var(--paper-0);
  --bg-sunk:        var(--paper-100);
  --bg-rail:        var(--paper-200);
  --bg-tint:        var(--pine-50);
  --bg-dark:        var(--pine-800);
  --bg-dark-soft:   var(--pine-700);

  --text-heading:   var(--pine-800);
  --text-body:      var(--ink-800);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-dark:   var(--paper-50);
  --text-on-dark-muted: #9db3ad;
  --text-on-primary: #ffffff;
  --text-link:      var(--pine-600);
  --text-link-hover:var(--pine-800);

  --border-default: var(--line);
  --border-strong:  var(--line-strong);
  --border-soft:    var(--line-soft);

  --money-pos: var(--pos-600);
  --money-neg: var(--neg-600);

  --focus-ring: color-mix(in srgb, var(--pine-500) 32%, transparent);
}
/* JVD Bookkeeping — Typography tokens
   Spectral (serif display) · IBM Plex Sans (UI/body + ALL ledger numbers, tabular)
   · IBM Plex Mono (code/IDs only — never money; ratified 2026-07-24). */
:root {
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display — Spectral, weight 400, tight tracking */
  --display-xl: 400 3.5rem/1.05 var(--font-display);   /* 56 */
  --display-lg: 400 2.625rem/1.1 var(--font-display);  /* 42 */
  --display-md: 400 2rem/1.15 var(--font-display);     /* 32 */
  --display-sm: 500 1.625rem/1.2 var(--font-display);  /* 26 */
  --tracking-display: -0.02em;

  /* Titles / labels — IBM Plex Sans */
  --title-lg: 600 1.25rem/1.3 var(--font-sans);   /* 20 */
  --title-md: 600 1.0625rem/1.4 var(--font-sans); /* 17 */
  --title-sm: 600 0.9375rem/1.4 var(--font-sans); /* 15 */

  /* Body — IBM Plex Sans */
  --body-lg: 400 1.0625rem/1.6 var(--font-sans);  /* 17 */
  --body-md: 400 0.9375rem/1.6 var(--font-sans);  /* 15 */
  --body-sm: 400 0.8125rem/1.55 var(--font-sans); /* 13 */
  --caption: 500 0.75rem/1.4 var(--font-sans);    /* 12 */

  /* Overline — small-caps label */
  --overline: 600 0.6875rem/1.3 var(--font-sans); /* 11 */
  --tracking-overline: 0.12em;

  /* Numerals — Plex Sans tabular (pair with font-variant-numeric: tabular-nums) */
  --num-xl: 600 1.75rem/1.1 var(--font-sans);     /* 28 KPI figures */
  --num-lg: 600 1.25rem/1.2 var(--font-sans);     /* 20 */
  --num-md: 500 0.9375rem/1.5 var(--font-sans);   /* 15 ledger rows */
  /* Code / IDs — the only mono in the system */
  --code:   400 0.8125rem/1.6 var(--font-mono);   /* 13 */
}
/* JVD Bookkeeping — Spacing & sizing (4px base) */
:root {
  --space-0: 0;
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-section: 6rem; /* 96 — band rhythm */

  --container: 1180px;
  --container-narrow: 760px;
}
/* JVD Bookkeeping — Radius & elevation
   Editorial + ledger: modest radii, restrained shadows. Depth is mostly color-block. */
:root {
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;   /* buttons, inputs */
  --radius-lg: 12px;  /* cards */
  --radius-xl: 16px;  /* marquee containers */
  --radius-pill: 999px;

  /* Shadows — low alpha, pine-tinted */
  --shadow-sm: 0 1px 2px rgba(16,37,38,0.06), 0 1px 1px rgba(16,37,38,0.04);
  --shadow-md: 0 2px 6px rgba(16,37,38,0.07), 0 1px 2px rgba(16,37,38,0.05);
  --shadow-lg: 0 8px 28px rgba(16,37,38,0.10), 0 2px 8px rgba(16,37,38,0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  --transition-fast: 120ms ease; /* @kind other */
  --transition: 180ms ease; /* @kind other */
}