/* ════════════════════════════════════════════════════════════════
   GPS Tracking Server — Design Tokens (single source of truth)
   "flespi-style Dark Console" theme. Every page loads this first.
   ════════════════════════════════════════════════════════════════ */

@import url('/vendor/fonts/fonts.css');

:root {
  /* ── Surfaces (dark, charcoal console) ── */
  --bg: #30363d;          /* app background (grid drawn on top in app.css) */
  --surface: #404952;     /* cards / panels */
  --surface-2: #363e46;   /* sunken areas, table header */
  --surface-3: #4b5560;   /* hover, inputs, chips */
  --chrome: #2b3138;      /* sidebar + topbar chrome */

  /* ── Ink ── */
  --ink: #f4f6f8;
  --ink-2: #c4ccd3;
  --ink-3: #98a3ad;

  /* ── Lines ── */
  --line: #4b5560;
  --line-2: #3f4851;
  --line-strong: #626d78;

  /* ── Brand accent (flespi amber) ── */
  --accent: #e8920c;
  --accent-hover: #f2a32c;
  --accent-soft: rgba(232, 146, 12, .16);
  --accent-glow: rgba(232, 146, 12, .35);

  /* ── Signal colors (device live/online = green, brightened for dark) ── */
  --signal: #3ecf78;
  --signal-ink: #5bd98e;
  --signal-soft: rgba(62, 207, 120, .14);
  --signal-glow: rgba(62, 207, 120, .42);

  /* ── Add / positive action (flespi green "+ Add") ── */
  --add: #43a047;
  --add-hover: #4cb050;

  --warn: #e0a72e;
  --warn-ink: #f0bd4e;
  --warn-soft: rgba(224, 167, 46, .15);

  --danger: #ef5a6f;
  --danger-ink: #f47a8b;
  --danger-soft: rgba(239, 90, 111, .16);

  --info: #4a90e2;
  --info-soft: rgba(74, 144, 226, .15);

  /* ── Action colors (primary buttons = amber accent) ── */
  --action: #e8920c;
  --action-hover: #f2a32c;
  --focus-ring: 0 0 0 3px rgba(232, 146, 12, .28);

  /* ── Typography ── */
  --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
  --fs-xs: 10.5px;
  --fs-sm: 11.5px;
  --fs-base: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 16px;
  --fs-xl: 19px;

  --label-tracking: .08em;

  /* ── Geometry ── */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --topbar-h: 52px;
  --sidebar-w: 232px;
  --sidebar-rail: 56px;

  /* ── Elevation (deep shadows for dark surfaces) ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .24);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .22), 0 10px 28px -16px rgba(0, 0, 0, .48);
  --shadow-3: 0 20px 56px -18px rgba(0, 0, 0, .58);

  /* ── Legacy aliases (consumed by shared.css / older page CSS) ── */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-raised: var(--surface);
  --color-surface-sunken: var(--surface-2);
  --color-border: var(--line);
  --color-border-light: var(--line-2);
  --color-text: var(--ink);
  --color-text-secondary: var(--ink-2);
  --color-text-muted: var(--ink-3);
  --color-primary: var(--action);
  --color-primary-hover: var(--action-hover);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-light: var(--accent-soft);
  --color-info: var(--info);
  --header-bg: var(--chrome);
  --header-border: var(--line);
  --color-success: var(--signal);
  --color-success-light: var(--signal-soft);
  --color-warning: var(--warn);
  --color-warning-light: var(--warn-soft);
  --color-danger: var(--danger);
  --color-danger-light: var(--danger-soft);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: 14px;
  --shadow-sm: var(--shadow-1);
  --shadow-md: var(--shadow-2);
  --shadow-lg: var(--shadow-2);
  --shadow-xl: var(--shadow-3);
  --header-h: var(--topbar-h);

  color-scheme: dark;
}