/* Hallmark · genre: modern-minimal · theme: Cobalt · design-system: design.md · designed-as-app
 * Custodial Lead Desk . the instrument-panel register.
 * paper: cool near-white · accent: electric cobalt · display: Space Grotesk
 * Every colour and font in this app references a token from this file by name.
 */

:root {
  /* ---- paper & ink ------------------------------------------------------ */
  --color-paper:    oklch(99% 0.003 250);
  --color-paper-2:  oklch(97.2% 0.005 250);
  --color-paper-3:  oklch(94.2% 0.008 250);
  --color-ink:      oklch(21% 0.021 262);
  --color-ink-2:    oklch(48% 0.016 260);
  --color-ink-3:    oklch(62% 0.012 258);
  --color-rule:     oklch(90.5% 0.010 252);
  --color-rule-2:   oklch(84% 0.014 252);

  /* ---- signal ----------------------------------------------------------- */
  --color-accent:     oklch(52% 0.208 258);
  --color-accent-ink: oklch(99% 0 0);
  --color-accent-wash:oklch(95.5% 0.032 258);
  --color-focus:      oklch(58% 0.195 258);
  --color-good:       oklch(56% 0.135 155);
  --color-warn:       oklch(62% 0.145 68);
  --color-bad:        oklch(56% 0.195 25);

  /* ---- segment family ---------------------------------------------------
   * Nine categories held at one lightness and one chroma so they read as a
   * single family and none shouts louder than another. Hue does the work. */
  --seg-medical:   oklch(57% 0.135 188);
  --seg-office:    oklch(57% 0.150 277);
  --seg-auto:      oklch(57% 0.170 27);
  --seg-fitness:   oklch(60% 0.140 62);
  --seg-retail:    oklch(57% 0.165 345);
  --seg-petcare:   oklch(57% 0.160 305);
  --seg-clubhouse: oklch(58% 0.115 215);
  --seg-worship:   oklch(57% 0.130 148);
  --seg-school:    oklch(60% 0.125 98);

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:  0.6875rem;
  --text-sm:  0.8125rem;
  --text-md:  0.9375rem;
  --text-lg:  1.125rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --track-tight: -0.02em;
  --track-caps:   0.08em;

  /* ---- 4pt space scale -------------------------------------------------- */
  --space-3xs: 0.25rem; --space-2xs: 0.375rem; --space-xs: 0.5rem;
  --space-sm:  0.75rem; --space-md:  1rem;     --space-lg: 1.5rem;
  --space-xl:  2rem;    --space-2xl: 3rem;

  /* ---- drawn lines & tight radii ---------------------------------------- */
  --rule-hair: 1px;
  --radius-control: 6px;
  --radius-panel:   8px;
  --radius-pill:    999px;

  /* ---- motion: state changes only, never decoration --------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-short: 180ms;
}

/* The viewer's theme decides; an explicit choice wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:     oklch(17.5% 0.017 262);
    --color-paper-2:   oklch(21.5% 0.019 262);
    --color-paper-3:   oklch(26% 0.021 262);
    --color-ink:       oklch(95% 0.006 250);
    --color-ink-2:     oklch(72% 0.016 255);
    --color-ink-3:     oklch(58% 0.016 258);
    --color-rule:      oklch(31% 0.020 260);
    --color-rule-2:    oklch(39% 0.022 260);
    --color-accent:      oklch(70% 0.170 256);
    --color-accent-ink:  oklch(16% 0.02 262);
    --color-accent-wash: oklch(28% 0.055 258);
    --color-focus:       oklch(76% 0.150 256);
    --color-good:        oklch(70% 0.130 155);
    --color-bad:         oklch(68% 0.170 25);
    --seg-medical:   oklch(70% 0.120 188);
    --seg-office:    oklch(70% 0.130 277);
    --seg-auto:      oklch(68% 0.155 27);
    --seg-fitness:   oklch(74% 0.130 62);
    --seg-retail:    oklch(70% 0.150 345);
    --seg-petcare:   oklch(70% 0.145 305);
    --seg-clubhouse: oklch(72% 0.105 215);
    --seg-worship:   oklch(72% 0.120 148);
    --seg-school:    oklch(74% 0.115 98);
  }
}