/*
 * Tennly design tokens v2 — the single source of truth for the web app,
 * marketing site and printed receipts. Rules for using them are in
 * DESIGN-LANGUAGE.md and APP-LAYOUT.md; read those first.
 *
 * --------------------------------------------------------------------------
 * v2 CHANGES (APP-LAYOUT.md, owner feedback 2026-10-11: v1 "feels like 2005")
 * --------------------------------------------------------------------------
 * Renamed variables: NONE. Every existing --tn-* name keeps working.
 *
 * Value changes (existing names, new values):
 *   --tn-bg            #F6F5F0 warm paper -> #F3F4F6 neutral light grey canvas
 *   --tn-surface       #FEFDF9 paper sheet -> #FFFFFF white panels on the canvas
 *   --tn-surface-raised #EFEEE7 -> #F2F4F7 neutral quiet fill / hover
 *   --tn-rule          #DCD9CF -> #E3E5E8  panel hairlines, ledger row rules
 *   --tn-rule-strong   #B9B5A6 -> #B9BEC7  input borders, header/totals rules
 *                      (kept the same visual weight as v1, retinted neutral)
 *   --tn-radius        3px -> 6px   controls (buttons, inputs)
 *   --tn-radius-small  2px -> 4px   status tags, checkboxes
 *   --tn-slate         #8A8F9A -> #6E7480  darkened so placeholder/disabled
 *                      text clears 4.5:1 on white (AA) instead of 3.2:1
 *
 * New tokens:
 *   --tn-radius-panel  8px   panels (white surfaces on the grey canvas)
 *   --tn-shadow-overlay  the ONE soft shadow: menus, drawers, modals only
 *   --tn-table-row-height 44px / --tn-size-table 14px  table density
 *   --tn-sidebar-width 240px / --tn-sidebar-collapsed 64px  app shell
 *   --tn-topbar-height 56px
 *   --tn-size-ui 15px (15-16px for chrome; 16px stays the body size)
 *   --tn-focus-width / --tn-focus-offset  the always-visible focus ring
 *
 * Kept untouched: IBM Plex superfamily + tabular figures, Tennly navy brand,
 * the four status colours and their fills, the money colours, the spacing
 * scale, --tn-duration. Money is still always right-aligned, tabular, signed.
 *
 * Contrast (checked against #FFFFFF panels and the #F3F4F6 canvas):
 *   ink #1B2330 15.8:1 on white · muted #5A6472 6.0:1 (AA) · slate #6E7480 4.7:1 (AA)
 *   brand #1F4E79 8.7:1 on white; white on brand 8.7:1 (AA)
 *   paid #2E6B45 6.4:1 · due #9A6111 5.1:1 · overdue #A32B22 7.2:1 (all AA on white)
 *   status tag text uses --tn-on-status ink on the pale *-fill backgrounds,
 *   which keeps 12:1+. Input borders are 3.2:1 on white and every focusable
 *   control also carries the 2px --tn-text focus ring.
 */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Surfaces: neutral light grey canvas with white panels laid on it.
     Landlords work in daylight on laptops; dark is opt-in below. */
  --tn-bg: #F3F4F6;            /* app canvas: neutral, no warm cast */
  --tn-surface: #FFFFFF;       /* panels: white, 1px --tn-rule border, 8px radius */
  --tn-surface-raised: #F2F4F7;/* quiet fill / hover step inside a panel */
  --tn-rule: #E3E5E8;          /* hairlines: panel borders, ledger row rules */
  --tn-rule-strong: #B9BEC7;   /* input borders, header rule, totals double rule */

  /* Text: ink */
  --tn-text: #1B2330;          /* ink navy-black, 15.8:1 on white */
  --tn-text-muted: #5A6472;    /* secondary entries, 6.0:1 on white (AA) */
  --tn-slate: #6E7480;         /* disabled, placeholder: 4.7:1 on white (AA) */

  /* Brand: deep Tennly navy. The one colour for the primary action and links.
     Do not use it as decoration. */
  --tn-brand: #1F4E79;
  --tn-brand-strong: #173C5E;  /* hover: one step darker, never a glow */
  --tn-on-brand: #FFFFFF;

  /* Ledger status. Colour carries the state of a balance, nothing else. */
  --tn-paid: #2E6B45;          /* settled / current: ledger green */
  --tn-paid-fill: #E9F2EB;
  --tn-due: #9A6111;           /* due soon: amber, darkened for AA */
  --tn-due-fill: #FAF0E0;
  --tn-overdue: #A32B22;       /* overdue / destructive: oxide red */
  --tn-overdue-fill: #FAE9E7;
  --tn-on-status: #1B2330;     /* text used inside a pale status fill */

  /* Money */
  --tn-money-pos: #2E6B45;     /* credit / paid ahead */
  --tn-money-neg: #A32B22;     /* owed / negative balance */
  --tn-money-zero: #5A6472;    /* settled at exactly zero */

  /* Shape: controls 6px, panels 8px, tags 4px. Never pills (no 999px except
     avatar circles); nothing else in the UI rounds past these. */
  --tn-radius: 6px;            /* buttons, inputs */
  --tn-radius-panel: 8px;      /* panels, cards, menus */
  --tn-radius-small: 4px;      /* status tags, checkboxes */

  /* The one overlay shadow. Menus, drawers and modals ONLY — panels, tables
     and cards stay flat with a 1px --tn-rule border. */
  --tn-shadow-overlay: 0 8px 28px rgba(16, 24, 40, 0.14);

  /* App shell geometry */
  --tn-sidebar-width: 240px;   /* expanded: icon + label + live counts */
  --tn-sidebar-collapsed: 64px;/* icon-only rail */
  --tn-topbar-height: 56px;    /* page title + breadcrumb, search, New menu */

  /* Table density: the rent roll and ledger stay dense and scannable. */
  --tn-table-row-height: 44px;
  --tn-size-table: 0.875rem;   /* 14px in tables (equals --tn-size-small) */

  /* Type: IBM Plex. Serif now only for the page title and big numbers; UI
     headings in Plex Sans 600. Tabular numerals everywhere money appears. */
  --tn-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tn-font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --tn-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --tn-size-body: 1rem;        /* 16px body */
  --tn-size-ui: 0.9375rem;     /* 15px chrome: nav, buttons, table headers */
  --tn-size-small: 0.875rem;   /* 14px table rows, receipts */
  --tn-leading: 1.55;
  --tn-measure: 64ch;          /* max line length for prose */

  /* Spacing scale (use these, not arbitrary values) */
  --tn-space-1: 4px;  --tn-space-2: 8px;  --tn-space-3: 12px; --tn-space-4: 16px;
  --tn-space-5: 24px; --tn-space-6: 32px; --tn-space-7: 48px; --tn-space-8: 72px;

  /* Focus: always visible, 2px ink outline with offset */
  --tn-focus-width: 2px;
  --tn-focus-offset: 2px;

  /* Motion: almost none */
  --tn-duration: 120ms;
}

/* Dark theme: optional, for the landlord catching up at night. Deep ink sheet. */
[data-theme="dark"] {
  --tn-bg: #14171C;            /* neutral graphite ink */
  --tn-surface: #1C2026;
  --tn-surface-raised: #252A32;
  --tn-rule: #2E343C;
  --tn-rule-strong: #3D454F;

  --tn-text: #F0F1F3;
  --tn-text-muted: #A9B0BA;
  --tn-slate: #7D858F;

  --tn-brand: #5FA8D9;         /* lightened for AA on graphite */
  --tn-brand-strong: #7FBBE4;
  --tn-on-brand: #101418;

  --tn-paid: #7FC08F;
  --tn-paid-fill: #1D2F25;
  --tn-due: #E0A95E;
  --tn-due-fill: #312716;
  --tn-overdue: #EE8F84;
  --tn-overdue-fill: #31201E;
  --tn-on-status: #F0F1F3;

  --tn-money-pos: #7FC08F;
  --tn-money-neg: #EE8F84;
  --tn-money-zero: #A9B0BA;

  --tn-shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root { --tn-duration: 0ms; }
}