/*
  Design tokens for R & D Property Management.
  Justification for each choice is in docs/design-tokens.md. Contrast ratios there too.
*/
:root {
  /* Type. Base 13px for density; ratio 1.2 (minor third). Named face: the operating
     system's UI sans (Segoe UI on Windows, SF on macOS, Roboto on Android), all of which
     carry true tabular figures via the tnum feature. Every number and date uses .num. */
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --fs-xs: 11px;   /* 13 / 1.2 */
  --fs-sm: 13px;   /* base */
  --fs-md: 16px;   /* 13 * 1.2 rounded */
  --fs-lg: 19px;
  --fs-xl: 23px;
  --lh-tight: 1.25;
  --lh-body: 1.45;

  /* Spacing, 4px grid. --sp-1 is the table row step. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* Neutral ramp. Eleven steps, warm grey, does ninety per cent of the work. */
  --n0: #ffffff;
  --n1: #f7f7f6;
  --n2: #efefed;
  --n3: #e2e2df;
  --n4: #c9c9c5;
  --n5: #a3a39e;
  --n6: #7c7c77;
  --n7: #5f5f5a;
  --n8: #45453f;
  --n9: #2c2c28;
  --n10: #1a1a17;

  /* Accent: the one primary action on a screen, and the focus ring. Nothing else. */
  --accent: #1f4e9c;
  --accent-hover: #17407f;
  --accent-active: #123366;

  /* Semantic: settled, due, overdue. Always paired with a label; colour is never alone. */
  --settled-fg: #1e6b3a;
  --settled-bg: #e6f3ea;
  --due-fg: #8a5a00;
  --due-bg: #fbf1dc;
  --overdue-fg: #a3271f;
  --overdue-bg: #fbe6e4;

  /* Roles */
  --text: var(--n9);
  --text-secondary: var(--n7);
  --text-muted: var(--n6);
  --text-inverse: var(--n0);
  --bg: var(--n0);
  --bg-sunken: var(--n1);
  --bg-raised: var(--n0);
  --bg-hover: var(--n2);
  --bg-selected: var(--n2);
  --sidebar-bg: var(--n9);
  --sidebar-text: var(--n0);
  --sidebar-text-secondary: var(--n4);
  --sidebar-hover: var(--n8);
  --border: var(--n3);
  --border-strong: var(--n4);

  /* One border weight, one radius. Elevation only for things that overlay. */
  --bw: 1px;
  --radius: 3px;
  --shadow-overlay: 0 4px 12px rgba(26, 26, 23, 0.18), 0 0 0 1px rgba(26, 26, 23, 0.06);

  --focus-ring: 2px solid var(--accent);
  --focus-offset: 1px;
  --target-min: 24px;
  --control-h: 28px;
}