/* Durand Fils — generated from tokens.json */
:root, [data-theme="light"] {
  --surface: #f9ebe0; /* Page and app background. The brand's dominant colour, given as-is. */
  --surface-raised: #fcf6f1; /* Cards, panels, modals, the chat window frame. Lift off `surface` with `shadow-sm` or `shadow-md`, not a border. */
  --surface-sunken: #ebded3; /* Input fields, the search bar, table header row, received chat bubbles, code/quote blocks. */
  --surface-badge: #ffece2; /* Dedicated background for badges only — distinct from `surface-raised` (cards, panels, the chat frame) so a badge never gets lost against a raised panel, a hovered table row or the chat surface. A lightened version of the requested #FFC5C5 (same pink, same family as `accent-subtle`): at #FFC5C5 itself, `success` and `warning` badge text fall just under the 4.5:1 body-text floor at caption size (4.16:1 / 3.95:1); lightened here, `success` reaches 4.79:1, `warning` 4.56:1, `danger`/`accent-strong` 7.70:1. */
  --divider: #d9ccc3; /* Decorative hairline rules: list separators, table row dividers, menu separators. Not for control outlines — use `border` where the line must meet the 3:1 non-text floor. */
  --border: #867e77; /* Default control outline (inputs, search field, dropdowns, table cell borders) and the default icon colour. Given brand colour; 3.4:1 on `surface`, meeting WCAG's 3:1 floor for meaningful boundaries. */
  --ink: #12100e; /* Primary text and icons on every surface tone. The brand's secondary colour, used here as ink. 16.3:1 on `surface`. */
  --ink-secondary: #716a64; /* Secondary text at body sizes: captions, table meta, helper text, timestamps. Derived by darkening `border` toward `ink` so normal-size text clears 4.5:1 (4.6:1 on `surface`); use `border` itself only for icons, large text or non-text marks. */
  --accent: #fd0000; /* The brand accent — focus rings, the active tab/nav indicator, the wordmark's underline flourish, badges, the chat 'sent' bubble. Pair with `ink` text (4.7:1); white text on this fill only clears AA at 24px+ or bold 19px+ (4.1:1) — use `accent-strong` for normal-size white-on-red text. */
  --accent-strong: #890807; /* Solid buttons, primary calls to action, the hover/pressed state of `accent`, links and small emphasis text on `surface` (8.6:1), destructive actions. `danger` points here. Pair with `on-fill` white text (10:1). */
  --accent-muted: #c33f3c; /* Secondary emphasis: a second badge tone, selected-row text, chart series 2. 4.4:1 on `surface` — a hair under the 4.5:1 body-text floor, so reserve for large text (18px+), icons and filled chips (`on-fill` white reaches 5.1:1 there); the source gave this exact value, so it stays as supplied rather than being re-tinted. */
  --accent-subtle: #f9cfc5; /* Background for accent badges, selected list rows, unread indicators. Pair with `accent-strong` text (7:1) or `ink` (13.3:1). */
  --success: #3f6b3a; /* Positive status text/icons and positive deltas in tables and charts. Added colour — not in the supplied swatches — chosen as a warm, muted forest green that sits quietly beside the brand reds rather than competing with them. 5.3:1 on `surface`; `on-fill` white reaches 6.2:1 on a filled success chip. */
  --success-subtle: #eee3d6; /* Background for success badges and positive table/chart rows. Pair with `success` text (4.9:1). */
  --warning: #8a5a12; /* Pending / needs-attention status text and icons. Added colour, an earthy amber kept dark enough to read as text. 5.1:1 on `surface`; `on-fill` white reaches 5.9:1 on a filled warning chip. */
  --warning-subtle: #f2e2d4; /* Background for warning badges and pending table/chart rows. Pair with `warning` text (4.7:1). */
  --danger: var(--accent-strong); /* Errors, destructive actions, negative deltas in tables/charts. Aliases `accent-strong` so the brand's one red carries both 'primary action' and 'danger' — only the subtle background differs. Pair with `on-fill` white (10:1). */
  --danger-subtle: #f2ddd3; /* Background for danger badges and negative table/chart rows. Pair with `danger` text (7.6:1). */
  --on-fill: #ffffff; /* Text and icons on saturated fills that need it: `accent-strong`, `accent-muted`, `success`, `warning` (all ≥4.5:1 there). Do not use on plain `accent` at normal text sizes — pair that with `ink` instead. */
  --shadow-sm: 0px 0px 9px -3px rgba(86,0,0,0.36); /* Resting cards, list rows, the search field, and filled/outlined buttons (primary, secondary) — the system's one lift-off-`surface` shadow: a tight, translucent dark-red glow rather than a classic offset drop shadow. */
  --shadow-md: 0 4px 12px rgba(18,16,14,0.10), 0 2px 4px rgba(18,16,14,0.06); /* Dropdowns, popovers, the floating chat composer bar. */
  --shadow-lg: 0 16px 32px rgba(18,16,14,0.16), 0 4px 8px rgba(18,16,14,0.08); /* Modals and dialogs — the highest layer. */
}
:root {
  --space-1: 4px; /* Icon-to-label gaps, badge inner padding. */
  --space-2: 8px; /* Compact control padding, chat bubble vertical padding, table cell vertical padding. */
  --space-3: 12px; /* Table cell horizontal padding, list item vertical rhythm. */
  --space-4: 16px; /* Default card and panel padding, chat bubble horizontal padding, form field gaps. */
  --space-5: 24px; /* Section gutters, gaps between cards, chat window side margins. */
  --space-6: 32px; /* Page-level padding, gaps between major regions. */
  --space-7: 48px; /* Large section breaks, empty-state vertical spacing. */
  --space-8: 64px; /* Top-level page margins on wide layouts. */
  --radius-sm: 6px; /* Inputs, badges/chips, the search field, chat composer. */
  --radius-md: 10px; /* Buttons, cards, panels, the table container. */
  --radius-lg: 16px; /* Chat bubbles, modals, large panels — anywhere the rounding should read as a deliberate shape, not a detail. */
  --radius-full: 999px; /* Avatars, status dots, pill badges, the search field's ends. */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", "Cascadia Code", monospace;
  --text-display: 700 32px/40px var(--font-sans); /* Empty states, section splash titles, the odd full-bleed moment. Used sparingly — this is a working data tool, not a marketing page. */
  --text-h1: 700 24px/32px var(--font-sans); /* Page titles. */
  --text-h2: 600 20px/28px var(--font-sans); /* Section headings, panel titles (chat window header, table card header). */
  --text-h3: 600 16px/24px var(--font-sans); /* Subsection headings, list group headers. */
  --text-body-lg: 400 16px/24px var(--font-sans); /* Chat message text, longer-form content. */
  --text-body: 400 14px/20px var(--font-sans); /* The default UI size: table cells, list rows, form values, buttons. */
  --text-body-strong: 600 14px/20px var(--font-sans); /* Emphasis at body size: list item titles, active states, a highlighted table cell. */
  --text-label: 500 13px/16px var(--font-sans); /* Form labels and table column headers. Set with +0.02em letter-spacing where the consuming app supports it; not encoded as a token here. */
  --text-caption: 400 12px/16px var(--font-sans); /* Timestamps, helper text, chat bubble meta, badge labels. */
  --text-data: 400 13px/20px var(--font-sans); /* Tabular figures: table numeric columns, amounts, IDs — right-aligned, using DM Mono's fixed-width digits so columns line up. Added family: DM Mono is the monospace companion to DM Sans, from the same type family. */
  --text-data-strong: 600 13px/20px var(--font-sans); /* Totals and emphasised figures within tables and charts. */
}
.display {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 40px;
  font-weight: 700;
  letter-spacing: 0;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: 0;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.body-strong {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0;
}
.caption {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.data {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.data-strong {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0;
}