/* Design system "Instrument" (concept B). Brand colours from config override --accent / --signal at runtime.
   Every niche has its own theme in themes.css ([data-theme] on <html>): it redefines the neutral
   and "look" tokens below; the brand colour (--accent) stays the client's own. */
:root {
  --bg: #ffffff;
  --bg-app: color-mix(in srgb, var(--accent) 4%, #f7f7f6);  /* page background with a hint of the brand */
  --surface: #f6f6f5;
  --surface-2: #ececea;
  --ink: #0f0f10;
  --ink-2: #5a5a62;
  --ink-3: #75757d;
  --line: #ececec;
  --line-strong: #dadadd;
  --line-soft: #f4f4f3;       /* half-hour lines in the calendar */

  --accent: #0f0f10;          /* primary actions; brand.colors.primary */
  --accent-ink: #ffffff;
  --brand-text: #0f0f10;      /* set by app.js: brand colour, or ink when the brand colour is too light */
  --accent-text: var(--brand-text);  /* dark themes lighten it */
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--bg));
  --accent-wash: color-mix(in srgb, var(--accent) 5%, var(--bg));
  --signal: #f2551d;          /* current time, active dot; brand.colors.accent */
  --focus: #2a78d6;

  --ok: #13804f;
  --ok-soft: #e7f4ed;
  --warn: #a15c00;
  --warn-soft: #fff4e0;
  --bad: #d23a2a;
  --bad-soft: #fdecea;
  --note-bg: #fffbeb;
  --note-line: #f5e7b5;

  /* validated categorical palette (dataviz reference order) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --font-display: "Geologica", system-ui, sans-serif;
  --font-body: "Onest", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;  /* number plates, odometer */
  --display-weight: 600;
  --display-tracking: -.02em;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-2: 0 8px 28px -12px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04);
  --shadow-fab: 0 6px 16px -6px rgba(0, 0, 0, .45);
  --focus-ring: color-mix(in srgb, var(--ink) 9%, transparent);
  --backdrop: rgba(10, 10, 12, .45);

  /* theme "look" tokens */
  --sidebar-bg: var(--accent-wash);
  --sidebar-deco: none;                /* background-image drawn over the sidebar colour */
  --sidebar-ink: var(--ink-2);
  --sidebar-ink-strong: var(--ink);
  --sidebar-brand-ink: var(--sidebar-ink-strong);
  --sidebar-line: color-mix(in srgb, var(--accent) 10%, var(--line));
  --sidebar-hover: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --sidebar-active-bg: var(--accent-soft);
  --sidebar-active-ink: var(--accent-text);
  --topbar-bg: color-mix(in srgb, var(--bg) 92%, transparent);
  --topbar-ink: var(--ink);
  --tabbar-bg: color-mix(in srgb, var(--bg) 96%, transparent);
  --app-deco: none;                    /* background-image of the page area */
  --hatch-1: rgba(0, 0, 0, .025);
  --hatch-2: rgba(0, 0, 0, .05);
  --appt-bg: var(--bg);
  --appt-tint: 0%;                     /* how much of the staff colour fills an appointment */
  --appt-tint-done: 7%;
  --appt-border: var(--line-strong);
  --appt-radius: 6px;
  --appt-bar: 3px;
  --hero-bg: #0f0f10;
  --hero-ink: #ffffff;
  --hero-muted: #a1a1aa;
  --hero-line: #2a2a2e;

  --z-sticky: 10;
  --z-nav: 20;
  --z-fab: 30;
  --z-toast: 100;

  --tabbar-h: 64px;
  --topbar-h: 56px;
  --sidebar-w: 232px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}