/* Design tokens. One source of truth for colour, type, space, radius, motion.
   Light is the default; dark applies for [data-theme="dark"] and, when the
   theme is "auto", for prefers-color-scheme: dark (theme.js sets data-theme). */

:root {
  color-scheme: light;

  /* Accent (Ubiquiti-style blue) */
  --accent: #0066ff;
  --accent-hover: #0058e0;
  --accent-press: #004fc2;
  --accent-subtle: #e6f0ff;
  --accent-text: #0058d6;      /* accent used as text on panels (>=4.5:1) */
  --on-accent: #ffffff;

  /* Ground and surfaces */
  --bg: #f4f6f9;
  --panel: #ffffff;
  --raised: #ffffff;
  --sunken: #eef1f5;
  --hover: #f1f4f8;
  --border: #e2e6ec;
  --border-strong: #cfd5de;

  /* Text */
  --text: #151a22;
  --text-2: #4b5565;           /* secondary, >=4.5:1 on panel */
  --text-3: #6b7585;           /* tertiary / placeholder, >=4.5:1 on panel */
  --text-disabled: #9aa3b0;

  /* Status */
  --ok: #138a4e;       --ok-bg: #e5f6ed;       --ok-solid: #1fb868;
  --warn: #9a5b00;     --warn-bg: #fff3dc;     --warn-solid: #f5a524;
  --bad: #c42b20;      --bad-bg: #fdeceb;      --bad-solid: #f04438;
  --info: var(--accent-text); --info-bg: var(--accent-subtle); --info-solid: var(--accent);
  --idle: #6b7585;     --idle-bg: #eef1f5;     --idle-solid: #9aa3b0;

  /* Rail (committed shell colour, same in both themes) */
  --rail-bg: #0b0b0d;
  --rail-border: #1d1d21;
  --rail-text: #b6b6bd;
  --rail-text-strong: #ffffff;
  --rail-hover: #17171a;
  --rail-active: #202024;
  --rail-accent: #4d9bff;

  /* Charts */
  --chart-1: #0066ff;
  --chart-2: #7c5cff;
  --chart-grid: #e8ecf1;

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 11.5px;
  --fs-sm: 12.5px;
  --fs-base: 13.5px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --lh: 1.45;

  /* Space (4px grid), radius, elevation, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --r-sm: 4px; --r: 6px; --r-lg: 10px;
  --shadow-pop: 0 8px 24px rgba(15, 23, 34, .14), 0 1px 3px rgba(15, 23, 34, .10);
  --shadow-sheet: 0 -8px 32px rgba(15, 23, 34, .18);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: 160ms;

  /* Layout */
  --rail-w: 232px;
  --rail-w-collapsed: 64px;
  --bar-h: 52px;
  --tabbar-h: 56px;
  --row-h: 36px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

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

  --accent: #3d8bff;
  --accent-hover: #5a9cff;
  --accent-press: #2f7ae8;
  --accent-subtle: #14284a;
  --accent-text: #6aa8ff;
  --on-accent: #06142b;

  --bg: #050506;
  --panel: #101012;
  --raised: #17171a;
  --sunken: #0a0a0c;
  --hover: #1a1a1e;
  --border: #252529;
  --border-strong: #37373d;

  --text: #ececef;
  --text-2: #a6a6ae;
  --text-3: #86868f;
  --text-disabled: #55555d;

  --ok: #4ddb94;       --ok-bg: #12301f;
  --warn: #ffbd4a;     --warn-bg: #36270a;
  --bad: #ff7a70;      --bad-bg: #3a1613;
  --idle: #86868f;     --idle-bg: #1a1a1e;

  --rail-bg: #000000;
  --rail-border: #1a1a1d;

  --chart-1: #4d9bff;
  --chart-2: #9d86ff;
  --chart-grid: #222226;

  --shadow-pop: 0 8px 28px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, .55);
}

/* Phone: larger type and touch sizes */
@media (max-width: 767px) {
  :root {
    --fs-xs: 12px; --fs-sm: 13px; --fs-base: 16px; --fs-md: 17px;
    --row-h: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}