/* Design tokens for the server-rendered screens.
 *
 * Every colour is defined once here and redefined once for dark; no component
 * below names a colour directly. That is what makes dark mode a token swap
 * rather than a second design.
 *
 * The values mirror app/frontend/styles/design-system.css, which is the React
 * half's Tailwind theme. Two files rather than one shared import because the
 * two pipelines cannot read each other -- that one is compiled by Vite, this
 * one is served by Propshaft with no build step, which is the whole point of
 * the split. They must be changed together; the ground, the ink and the accent
 * are the same values on purpose, so a property page and a dashboard look like
 * one application.
 */

:root {
  --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;

  --page: #ffffff;
  --surface: #f8fafc;
  --hairline: #e2e8f0;
  --ink-body: #334155;
  --ink-display: #0f172a;
  --ink-muted: #64748b;

  /* One accent. Links, primary buttons, selected rows, focus rings. It never
     carries meaning about the data. */
  --accent: oklch(71.5% 0.143 215.221);
  --accent-faded: oklch(96% 0.025 215.221);
  --accent-display: oklch(62% 0.135 215.221);

  /* Three semantic values, reserved for state: good, caution, broken. Used for
     match confidence and sync health, never for emphasis. A score is not
     coloured because it is high. */
  --good: oklch(58% 0.14 155);
  --good-faded: oklch(96% 0.03 155);
  --caution: oklch(76% 0.165 82);
  --caution-faded: #fffaea;
  --broken: oklch(55% 0.20 25);
  --broken-faded: oklch(96% 0.025 25);

  --radius: 4px;
}

.dark {
  --page: #020617;
  --surface: #0f172a;
  --hairline: #1e293b;
  --ink-body: #e2e8f0;
  --ink-display: #f8fafc;
  --ink-muted: #94a3b8;

  --accent: oklch(78.9% 0.154 211.53);
  --accent-faded: oklch(22% 0.045 211.53);
  --accent-display: oklch(86% 0.135 211.53);

  --good: oklch(78% 0.14 155);
  --good-faded: oklch(22% 0.04 155);
  --caution: oklch(93% 0.13 95);
  --caution-faded: #2f2b21;
  --broken: oklch(82% 0.18 22);
  --broken-faded: oklch(22% 0.05 22);
}