/* Three themes: Ledger (default), Console, Daylight.
 *
 * The design bundle ships four. "Original" (th-nocturne) is omitted on the
 * README's own instruction -- "do not ship it without asking" -- and because it
 * has no CSS block of its own in the prototype: it is just the base, so shipping
 * it would mean shipping an unstyled fourth option.
 *
 * The variables below the documented set (--filine, --flowbg, --hair, --pop,
 * --track and the accent tint pair) are used by the prototype but absent from
 * the README. They are carried here rather than rediscovered later.
 */

@font-face {
  font-family: 'Inter';
  src: url('/assets/vendor/inter/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ok: #8fd3b0;
  --warn: #dcc38c;
  --bad: #e0a0a0;
}

/* --- Theme A: Ledger (default, recommended) ------------------------------
 * Rules instead of boxes. Cards have no fill and no border, only a top rule;
 * statuses are coloured text rather than pills; KPIs are columns separated by
 * left rules. The accent is used for the active nav border, the sort arrow,
 * links and the focus ring -- nothing else.
 */
.th-ledger {
  --color-bg: #14151a;
  --panel: #101116;
  --bar: #14151a;
  --color-surface: transparent;
  --color-neutral-300: #c8c9d2;
  --color-neutral-400: #9a9db0;
  --color-neutral-500: #82859a;
  --color-neutral-600: #6c7080;
  --color-neutral-700: #4c5060;
  --color-neutral-800: rgba(255, 255, 255, 0.10);
  --color-neutral-900: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.06);
  --vline: transparent;
  --head: transparent;
  --sub: transparent;
  --hair: rgba(255, 255, 255, 0.14);
  --pop: #1c1d24;
  --fibg: rgba(255, 255, 255, 0.03);
  --filine: rgba(255, 255, 255, 0.12);
  --flowbg: rgba(255, 255, 255, 0.02);
  --track: rgba(255, 255, 255, 0.10);
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-300: #a79bea;
  --color-accent-200: rgba(145, 132, 217, 0.18);
  --color-accent-800: rgba(145, 132, 217, 0.34);
  --r: 0px;
  --r2: 2px;
  --page-gap: 20px;
  --kpi-size: 25px;
  --kpi-weight: 400;

  --chart-clicks: #9184d9;
  --chart-second: #8fd3b0;
  --chart-bots: #6c7080;
  --chart-grid: rgba(255, 255, 255, 0.07);
  --chart-axis: #75798c;

  --row-hover: rgba(255, 255, 255, 0.045);
  --row-selected: var(--color-accent-200);
  --row-stripe: rgba(255, 255, 255, 0.022);
}

/* --- Theme B: Console ----------------------------------------------------
 * Monospace everywhere, zero radius on everything, hard 1px grid, green
 * phosphor accent, lowercase h1.
 */
.th-console {
  --font-body: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading: var(--font-body);
  --color-bg: #0e1013;
  --panel: #0a0c0f;
  --bar: #0e1013;
  --color-surface: #12151a;
  --color-neutral-300: #c2ccd4;
  --color-neutral-400: #8b98a3;
  --color-neutral-500: #74838f;
  --color-neutral-600: #5f6d78;
  --color-neutral-700: #3a444d;
  --color-neutral-800: #242b32;
  --color-neutral-900: #1b2127;
  --line2: #1b2128;
  --vline: #171c22;
  --head: #161b21;
  --sub: #11151a;
  --hair: #242b32;
  --pop: #12161c;
  --fibg: #10141a;
  --filine: #242b32;
  --flowbg: #10141a;
  --track: #1b2127;
  --color-text: #d7e0e6;
  --color-accent: #8fd3b0;
  --color-accent-300: #a9e2c4;
  --color-accent-200: #d3f0e2;
  --color-accent-800: #1d3b2e;
  --r: 0px;
  --r2: 0px;
  --page-gap: 11px;
  --kpi-size: 19px;
  --kpi-weight: 500;

  --chart-clicks: #8fd3b0;
  --chart-second: #cbb98a;
  --chart-bots: #5d6b74;
  --chart-grid: #1b2128;
  --chart-axis: #5f6d78;

  --row-hover: rgba(255, 255, 255, 0.045);
  --row-selected: rgba(143, 211, 176, 0.16);
  --row-stripe: rgba(255, 255, 255, 0.022);
}

.th-console h1 {
  text-transform: lowercase;
}

/* --- Theme C: Daylight ---------------------------------------------------
 * Warm paper ground, ink text, flat 4px panels, deep indigo accent, outlined
 * pills retained. The semantic trio is re-tuned for a light ground.
 */
.th-day {
  --color-bg: #eceae4;
  --panel: #e5e2da;
  --bar: #f7f6f2;
  --color-surface: #fbfaf7;
  --color-neutral-300: #383b43;
  --color-neutral-400: #4d5058;
  --color-neutral-500: #63666e;
  --color-neutral-600: #7c7f87;
  --color-neutral-700: #9b9da4;
  --color-neutral-800: #d8d5cd;
  --color-neutral-900: #dedad2;
  --line2: #e7e4dc;
  --vline: #eeebe4;
  --head: #f0eee8;
  --sub: #f2f0ea;
  --hair: #d8d5cd;
  --pop: #ffffff;
  --fibg: #fdfcfa;
  --filine: #d8d5cd;
  --flowbg: #f4f2ed;
  --track: #ded9d0;
  --color-text: #1b1c21;
  --color-accent: #5347a8;
  --color-accent-300: #413794;
  --color-accent-200: #efedfa;
  --color-accent-800: #ddd8f4;
  --r: 4px;
  --r2: 4px;
  --page-gap: 11px;
  --kpi-size: 22px;
  --kpi-weight: 500;

  --ok: #2c7350;
  --warn: #8a6620;
  --bad: #a03f3c;

  --chart-clicks: #5347a8;
  --chart-second: #2c7350;
  --chart-bots: #9b9da4;
  --chart-grid: #e4e1d9;
  --chart-axis: #7c7f87;

  --row-hover: rgba(88, 75, 176, 0.07);
  --row-selected: var(--color-accent-200);
  --row-stripe: rgba(0, 0, 0, 0.022);
}