/* TrinityBooks design tokens, as CSS custom properties.
 * Values come from the :root block in TrinityBooks index.html (lines 11-19) and from the recurring hard-coded values in the same stylesheet
 * (marked "extracted"). See DESIGN-TOKENS.md. Load this file first, then use var(--tb-*) in TrinityRents.
 * The --ink/--paper/--brass/... names at the bottom are the ORIGINAL names, so styles.css works unchanged if you also include this file.
 */
/* TrinityRents change (0.3.2-preview): the kit's Google Fonts @import (Inter + Manrope) is removed (our CSP blocks Google Fonts). This file is otherwise the kit VERBATIM.
 * The TrinityRents palette + font (Lato, as in the approved landlord statement) are applied on top in /assets/theme.css, which loads after this file. */

:root {
  /* ---------- fonts (from :root) ---------- */
  --tb-font-body: 'Inter', system-ui, sans-serif;
  --tb-font-display: 'Manrope', 'Inter', system-ui, sans-serif;   /* headings, big numbers, brand name, money */
  --tb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --tb-text-base: 14px;            /* body font-size, line-height 1.5 */

  /* ---------- neutrals (from :root) ---------- */
  --tb-ink: #1c2530;               /* main text; also the sidebar and the default button fill */
  --tb-ink-2: #3a4654;             /* secondary text */
  --tb-muted: #7c8593;             /* labels, hints, table headings */
  --tb-paper: #f6f3ec;             /* page background (warm cream) */
  --tb-paper-2: #fffdf8;           /* lighter cream: drawers, table head, strips */
  --tb-card: #ffffff;              /* cards, panels, inputs */
  --tb-line: #dfd9cc;              /* borders */
  --tb-line-2: #ece7db;            /* hairlines: table rows, dividers */

  /* ---------- accents (from :root) ---------- */
  --tb-brass: #b3742e;             /* brand gold: links, focus, hover borders, "brass" buttons */
  --tb-brass-soft: #f1e2cc;
  --tb-teal: #2f6b5e;              /* good / tagged / money in */
  --tb-teal-soft: #d9eae4;
  --tb-owed: #9a3328;              /* bad / money out / missing / danger */
  --tb-owed-soft: #f6dcd6;
  --tb-purple: #6b3fa0;            /* bank-locked columns and the memo/category search strip */
  --tb-purple-soft: #f3ecf9;
  --tb-purple-line: #c4a8e0;

  /* ---------- the coral accent (extracted from .filter-clear-standout and the grid scrollbar) ---------- */
  --tb-coral: #e24a2a;             /* coral (the "Clear filters" button, scrollbar thumb) */
  --tb-coral-light: #ff6b45;       /* top of the coral gradient */
  --tb-coral-hover-light: #ff7d5c;
  --tb-coral-hover: #d03f20;
  --tb-coral-border: #c24a2e;
  --tb-coral-border-hover: #a3271a;
  --tb-coral-track: #f6d5cc;       /* scrollbar track */
  --tb-coral-gradient: linear-gradient(180deg, #ff6b45, #e24a2a);
  --tb-coral-gradient-hover: linear-gradient(180deg, #ff7d5c, #d03f20);
  --tb-coral-shadow: 0 1px 2px rgba(194,74,46,.35), inset 0 1px 0 rgba(255,255,255,.22);

  /* ---------- status colours (extracted from .pill.*) ---------- */
  --tb-status-untagged-bg: #e8eef8;  --tb-status-untagged-fg: #3a5a8a;
  --tb-status-review-bg: #d6e4ff;    --tb-status-review-fg: #1a4a9e;  --tb-status-review-border: #9bb8ef;  --tb-status-review-strong: #2b5bb5;
  --tb-status-tagged-bg: #d9eae4;    --tb-status-tagged-fg: #2f6b5e;
  --tb-status-locked-bg: #ebe6f5;    --tb-status-locked-fg: #4a3f6b;  --tb-status-locked-border: #b8a9d4;
  --tb-debit: #b42318;               /* red used for negative amounts in the head toolbar total */

  /* ---------- dark sidebar (extracted from .side / .nav) ---------- */
  --tb-side-bg: #1c2530;             /* = ink */
  --tb-side-text: #cdd5df;
  --tb-side-muted: #8b97a6;
  --tb-side-label: #69748a;
  --tb-side-hover: #27313e;
  --tb-side-active: #2f3d4d;
  --tb-side-box: #212b37;
  --tb-side-box-border: #2a3543;

  /* ---------- standout secondary buttons (extracted) ---------- */
  --tb-blue-gradient: linear-gradient(180deg, #3d9ec4, #21789c);    /* Undo */
  --tb-green-gradient: linear-gradient(180deg, #8fad45, #6a862e);   /* Redo */
  --tb-violet-gradient: linear-gradient(180deg, #6b5cad, #4a3f6b);  /* Apply */
  --tb-info-bg: #e8f6f8;  --tb-info-bg-2: #d5eef3;  --tb-info-border: #7ebcc8;   /* landing drop zone, account filter select */

  /* ---------- radii (extracted, most-used values) ---------- */
  --tb-radius-xs: 6px;      /* small tags */
  --tb-radius-sm: 8px;      /* nav items, tabs, small buttons, inputs in the grid strip (7-8px) */
  --tb-radius-md: 9px;      /* buttons, form inputs */
  --tb-radius-lg: 12px;     /* modals, popovers, landing panels */
  --tb-radius-xl: 14px;     /* cards, panels, KPI tiles */
  --tb-radius-2xl: 18px;    /* big drop zone */
  --tb-radius-pill: 999px;  /* status pills (20px in .pill), lock badge */

  /* ---------- shadows (from :root and extracted) ---------- */
  --tb-shadow: 0 1px 2px rgba(28,37,48,.05), 0 8px 24px rgba(28,37,48,.06);   /* cards and panels */
  --tb-shadow-popover: 0 10px 32px rgba(28,37,48,.14);
  --tb-shadow-drawer: -12px 0 40px rgba(20,27,35,.18);
  --tb-shadow-toast: 0 8px 30px rgba(0,0,0,.25);
  --tb-scrim: rgba(20,27,35,.42);

  /* ---------- spacing (extracted; the app uses a loose 4px-ish scale, no named steps) ---------- */
  --tb-space-1: 4px;  --tb-space-2: 6px;  --tb-space-3: 8px;  --tb-space-4: 10px;  --tb-space-5: 12px;
  --tb-space-6: 14px; --tb-space-7: 16px; --tb-space-8: 18px; --tb-space-9: 24px;  --tb-space-10: 30px; --tb-space-11: 38px;
  --tb-sidebar-width: 248px;
  --tb-page-max: 1280px;
  --tb-drawer-width: 640px;

  /* ---------- type sizes (extracted, most-used) ---------- */
  --tb-fs-2xs: 10px;   /* field labels in dense strips */
  --tb-fs-xs: 11px;    /* table heads, pills, KPI labels (uppercase) */
  --tb-fs-sm: 12px;    /* small buttons, dense inputs */
  --tb-fs-cell: 12.5px;/* grid cells */
  --tb-fs-md: 13.5px;  /* table cells, form inputs, nav */
  --tb-fs-lg: 16px;    /* panel titles */
  --tb-fs-xl: 20px;    /* drawer titles, balance figures */
  --tb-fs-h1: 28px;    /* page titles (22px on wide pages, 36px on the landing) */
  --tb-fs-kpi: 24px;
}

/* ---------- original names, so styles.css (extracted verbatim) works when this file is loaded too ---------- */
:root {
  --font-body: var(--tb-font-body);  --font-display: var(--tb-font-display);
  --ink: var(--tb-ink); --ink2: var(--tb-ink-2); --line: var(--tb-line); --line2: var(--tb-line-2);
  --paper: var(--tb-paper); --paper2: var(--tb-paper-2); --card: var(--tb-card);
  --brass: var(--tb-brass); --brass-soft: var(--tb-brass-soft); --owed: var(--tb-owed); --owed-soft: var(--tb-owed-soft);
  --teal: var(--tb-teal); --teal-soft: var(--tb-teal-soft); --muted: var(--tb-muted); --shadow: var(--tb-shadow);
  --purple: var(--tb-purple); --purple-soft: var(--tb-purple-soft); --purple-line: var(--tb-purple-line);
}