/* Design tokens. Every color and font in the app comes from here; never hardcode them elsewhere.
   Palette is derived from the AG logo: navy #0A1628, blue #00A3FF, aqua #7DF9FF, deep blue #0077C2. */

:root {
  color-scheme: light;

  /* type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 22px;

  /* shape and spacing */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  /* surfaces */
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #eaf0f8;
  --selected: #dcefff;
  --overlay: rgba(10, 22, 40, 0.5);

  /* text */
  --text: #0a1628;
  --text-muted: #56677f;
  --text-on-primary: #ffffff;

  /* lines */
  --border: #d3dcea;
  --border-strong: #aebcd1;

  /* brand */
  --primary: #0077c2;
  --primary-hover: #005f9c;
  --accent: #00a3ff;
  --accent-2: #7df9ff;

  /* status */
  --ok: #178a4c;
  --warn: #b26a00;
  --off: #8391a6;
  --danger: #c62828;

  /* device age scale: just heard -> 24 h -> 7 days or more */
  --age-fresh: #16a34a;
  --age-day: #eab308;
  --age-old: #dc2626;

  --shadow: 0 2px 10px rgba(10, 22, 40, 0.12);
}

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

  --bg: #060e1b;
  --surface: #0a1628;
  --surface-2: #112340;
  --selected: #12365c;
  --overlay: rgba(0, 0, 0, 0.65);

  --text: #e8f0fa;
  --text-muted: #94a6c0;
  --text-on-primary: #04101f;

  --border: #1c3250;
  --border-strong: #2d4a72;

  --primary: #00a3ff;
  --primary-hover: #3bb8ff;
  --accent: #00a3ff;
  --accent-2: #7df9ff;

  --ok: #3ddc84;
  --warn: #ffb020;
  --off: #6b7d96;
  --danger: #ff6b6b;

  --age-fresh: #3ddc84;
  --age-day: #ffd23f;
  --age-old: #ff5c5c;

  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

html {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}