/* ---------------------------------------------------------------------------
   Districthive AI Ops: theme tokens.

   THIS IS THE ONLY FILE THAT SHOULD CHANGE WHEN THE THEME CHANGES.

   Values come from the host dashboard (districthive/host, src/index.css:
   Tailwind 4 + shadcn "new-york", neutral oklch scale) so staff move between
   host.districthive.io and this dashboard without noticing. Status colours are
   the Tailwind shades the host already uses for the same meanings:
     available / online / ok      green-100 on green-700, emerald-500
     needs cleaning / attention   orange-100 on orange-700, amber-600
     occupied / informational     blue-100 on blue-700
     offline / failure            red-500, destructive
   Brand: yellow #ffd701 (charts, PWA theme colour), orange #ef987c, dark #212325.
   --------------------------------------------------------------------------- */

@import url("https://rsms.me/inter/inter.css");

:root {
  /* Brand */
  --brand-yellow:    #ffd701;
  --brand-orange:    #ef987c;
  --brand-dark:      #212325;

  /* Surfaces (host: --background, --card, --muted, --primary) */
  --surface-page:    oklch(1 0 0);
  --surface-raised:  oklch(1 0 0);
  --surface-sunken:  oklch(0.97 0 0);
  --surface-inverse: var(--brand-dark);

  /* Text (host: --foreground, --muted-foreground) */
  --text-primary:    oklch(0.145 0 0);
  --text-secondary:  oklch(0.371 0 0);
  --text-muted:      oklch(0.556 0 0);
  --text-inverse:    oklch(0.985 0 0);

  /* Lines (host: --border, --ring) */
  --border-default:  oklch(0.922 0 0);
  --border-strong:   oklch(0.708 0 0);

  /* State */
  --state-ok:        #15803d;   /* green-700 */
  --state-ok-bg:     #dcfce7;   /* green-100 */
  --state-warn:      #c2410c;   /* orange-700 */
  --state-warn-bg:   #ffedd5;   /* orange-100 */
  --state-bad:       #b91c1c;   /* red-700 */
  --state-bad-bg:    #fee2e2;   /* red-100 */
  --state-info:      #1d4ed8;   /* blue-700 */
  --state-info-bg:   #dbeafe;   /* blue-100 */
  --state-idle:      #71717a;   /* zinc-500 */
  --state-idle-bg:   #f4f4f5;   /* zinc-100 */

  /* Accent: the host's primary button is near-black on white. */
  --accent:          oklch(0.205 0 0);
  --accent-contrast: oklch(0.985 0 0);

  /* Links: the brand yellow, darkened enough to read on white. */
  --link:            #a67c00;
  --link-hover:      #7a5b00;

  /* Charts: one series, one accent; the meter track is a lighter step of the same ramp. */
  --surface-log:     oklch(0.985 0.006 250);  --border-log:     oklch(0.90 0.02 250);
  --surface-actions: oklch(0.985 0.012 85);   --border-actions: oklch(0.90 0.04 85);
  --surface-docs:    oklch(0.975 0 0);        --border-docs:    oklch(0.88 0 0);
  --chart-accent:    #a67c00;
  --meter-track:     #f3ead0;

  /* Type (host --font-sans) */
  --font-ui:   -apple-system, "Inter", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --size-100:  0.75rem;
  --size-200:  0.8125rem;
  --size-300:  0.875rem;
  --size-400:  1rem;
  --size-600:  1.25rem;
  --size-800:  1.75rem;
  --size-900:  2.25rem;

  /* Space and shape (host --radius: 0.625rem) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --radius:  0.625rem;
  --shadow:  0 1px 2px rgba(16, 24, 40, 0.06);
}

/* host .dark scale */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:    oklch(0.145 0 0);
    --surface-raised:  oklch(0.205 0 0);
    --surface-sunken:  oklch(0.145 0 0);
    --surface-inverse: oklch(0.985 0 0);
    --text-primary:    oklch(0.985 0 0);
    --text-secondary:  oklch(0.8 0 0);
    --text-muted:      oklch(0.708 0 0);
    --text-inverse:    oklch(0.145 0 0);
    --border-default:  oklch(1 0 0 / 10%);
    --border-strong:   oklch(1 0 0 / 20%);
    --state-ok:        #4ade80;  --state-ok-bg:   #052e16;
    --state-warn:      #fb923c;  --state-warn-bg: #431407;
    --state-bad:       #f87171;  --state-bad-bg:  #450a0a;
    --state-info:      #60a5fa;  --state-info-bg: #172554;
    --state-idle:      #a1a1aa;  --state-idle-bg: #27272a;
    --accent:          oklch(0.922 0 0);
    --accent-contrast: oklch(0.205 0 0);
    --link:            var(--brand-yellow);
    --link-hover:      #ffffff;
    --surface-log:     oklch(0.19 0.012 250);  --border-log:     oklch(0.30 0.02 250);
    --surface-actions: oklch(0.21 0.02 85);    --border-actions: oklch(0.33 0.04 85);
    --surface-docs:    oklch(0.235 0 0);       --border-docs:    oklch(0.34 0 0);
    --chart-accent:    #b08d00;   /* validated on the dark surface (OKLCH L 0.66) */
    --meter-track:     #3a3520;
  }
}