/* Farm design system — tokens, fonts and base. Shared, byte-identical, by the gateway
 * dashboard (Farm NMS) and the Farm Monitor phone app; each app keeps its own frame
 * stylesheet (css/app.css).
 *
 * Visual language from the Stitch "Precision Industrial SCADA" study: slate
 * surfaces, 1px outlines instead of shadows, small radii, monospace figures for
 * every reading. Two corrections to it: the status colours are kept for icons,
 * borders and bars, and darker shades carry text (the Stitch values fail WCAG
 * contrast as text on white); and every surface has a dark twin.
 *
 * Everything here ships with each app. The gateway must work on a farm LAN with no
 * internet, so no font, icon or stylesheet is fetched from anywhere else.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* surfaces */
  --canvas: #ffffff;
  --container: #f8fafc;
  --well: #f1f5f9;
  --overlay: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --border-overlay: #0f172a;

  /* text */
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #5b6b80;

  /* status: marks (icons, bars, borders) and text */
  --ok: #059669;        --ok-text: #047857;
  --warn: #d97706;      --warn-text: #b45309;
  --crit: #dc2626;      --crit-text: #b91c1c;
  --accent: #0284c7;    --accent-text: #0369a1;
  --accent-strong: #0369a1;  --accent-strong-hover: #075985;
  --on-accent: #ffffff;
  --crit-strong: #b91c1c;    --crit-strong-hover: #991b1b;

  /* chips */
  --chip-ok-bg: #f0fdf4;   --chip-ok-bd: #86efac;   --chip-ok-fg: #166534;
  --chip-warn-bg: #fffbeb; --chip-warn-bd: #fde68a; --chip-warn-fg: #92400e;
  --chip-crit-bg: #fef2f2; --chip-crit-bd: #fca5a5; --chip-crit-fg: #991b1b;
  --chip-info-bg: #f0f9ff; --chip-info-bd: #7dd3fc; --chip-info-fg: #075985;
  --chip-neutral-bg: #f8fafc; --chip-neutral-bd: #cbd5e1; --chip-neutral-fg: #475569;

  /* tables and banners */
  --row-stripe: #f8fafc;
  --row-hover: #f1f5f9;
  --row-crit: #fef2f2;
  --row-warn: #fffbeb;
  --banner-ok: #f0fdf4;
  --banner-warn: #fffbeb;
  --banner-crit: #fef2f2;
  --banner-info: #f0f9ff;

  /* type */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic",
             Tahoma, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Noto Sans Arabic",
               monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px;

  /* shape and rhythm */
  --r-control: 4px;
  --r-card: 6px;
  --h-control: 32px;
  --h-panel-head: 36px;
  --h-chip: 20px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  --statusbar-h: 48px;
  --sidebar-w: 224px;
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}

/* Dark palette: when this device prefers dark and no explicit choice was made, and
   whenever dark was chosen. The gateway always stamps a choice; the phone app
   stamps one only after the user toggles. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --canvas: #020617;
    --container: #0b1224;
    --well: #111a2e;
    --overlay: #0b1224;
    --border: #1e293b;
    --border-strong: #334155;
    --border-overlay: #94a3b8;

    --text: #f1f5f9;
    --text-2: #cbd5e1;
    --text-3: #94a3b8;

    --ok: #34d399;        --ok-text: #6ee7b7;
    --warn: #fbbf24;      --warn-text: #fcd34d;
    --crit: #f87171;      --crit-text: #fca5a5;
    --accent: #38bdf8;    --accent-text: #7dd3fc;
    --accent-strong: #0ea5e9;  --accent-strong-hover: #38bdf8;
    --on-accent: #04111f;
    --crit-strong: #dc2626;    --crit-strong-hover: #b91c1c;

    --chip-ok-bg: #052e1b;   --chip-ok-bd: #166534;   --chip-ok-fg: #86efac;
    --chip-warn-bg: #2a1a05; --chip-warn-bd: #92400e; --chip-warn-fg: #fcd34d;
    --chip-crit-bg: #2a0a0a; --chip-crit-bd: #991b1b; --chip-crit-fg: #fca5a5;
    --chip-info-bg: #04223a; --chip-info-bd: #075985; --chip-info-fg: #7dd3fc;
    --chip-neutral-bg: #111a2e; --chip-neutral-bd: #334155; --chip-neutral-fg: #cbd5e1;

    --row-stripe: #081022;
    --row-hover: #111a2e;
    --row-crit: #2a0a0a;
    --row-warn: #2a1a05;
    --banner-ok: #052e1b;
    --banner-warn: #2a1a05;
    --banner-crit: #2a0a0a;
    --banner-info: #04223a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --canvas: #020617;
  --container: #0b1224;
  --well: #111a2e;
  --overlay: #0b1224;
  --border: #1e293b;
  --border-strong: #334155;
  --border-overlay: #94a3b8;

  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;

  --ok: #34d399;        --ok-text: #6ee7b7;
  --warn: #fbbf24;      --warn-text: #fcd34d;
  --crit: #f87171;      --crit-text: #fca5a5;
  --accent: #38bdf8;    --accent-text: #7dd3fc;
  --accent-strong: #0ea5e9;  --accent-strong-hover: #38bdf8;
  --on-accent: #04111f;
  --crit-strong: #dc2626;    --crit-strong-hover: #b91c1c;

  --chip-ok-bg: #052e1b;   --chip-ok-bd: #166534;   --chip-ok-fg: #86efac;
  --chip-warn-bg: #2a1a05; --chip-warn-bd: #92400e; --chip-warn-fg: #fcd34d;
  --chip-crit-bg: #2a0a0a; --chip-crit-bd: #991b1b; --chip-crit-fg: #fca5a5;
  --chip-info-bg: #04223a; --chip-info-bd: #075985; --chip-info-fg: #7dd3fc;
  --chip-neutral-bg: #111a2e; --chip-neutral-bd: #334155; --chip-neutral-fg: #cbd5e1;

  --row-stripe: #081022;
  --row-hover: #111a2e;
  --row-crit: #2a0a0a;
  --row-warn: #2a1a05;
  --banner-ok: #052e1b;
  --banner-warn: #2a1a05;
  --banner-crit: #2a0a0a;
  --banner-info: #04223a;
}


/* ---- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 400 var(--fs-base) / 1.45 var(--font-ui);
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--fs-xl); line-height: 28px; }
h2 { font-size: var(--fs-lg); line-height: 22px; }
h3 { font-size: var(--fs-base); line-height: 20px; }
p { margin: 0; }
a { color: var(--accent-text); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
code, kbd, .mono { font-family: var(--font-mono); font-size: 0.92em; }

.i { width: 18px; height: 18px; flex: none; fill: currentColor; vertical-align: middle; }
.i.sm { width: 16px; height: 16px; }
.i.lg { width: 22px; height: 22px; }

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums slashed-zero;
  white-space: nowrap;
}
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wrap-any { overflow-wrap: anywhere; }
.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.ok-text { color: var(--ok-text); }
.warn-text { color: var(--warn-text); }
.crit-text { color: var(--crit-text); }
.label {
  font: 600 var(--fs-xs) / 14px var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}