/* SINKER-STYLE tokens. Single source for colors, radii and type on the web.
   Mirrored in the desktop app's Theme.xaml (Phase 3). */
:root {
  --bg: #0b1220;
  --surface: #111827;
  --surface-alt: #182233;
  --input: #0d1524;
  --border: #2a3a51;
  --text: #e8eef7;
  --muted: #8b9bb4;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-fill: #115e59;
  --accent-text: #ecfdf5;
  --accent-toggle: #0f766e;
  --danger: #fb7185;
  --danger-fill: #3f1d2b;
  --warning: #fbbf24;
  --hover: #243044;
  --hover-border: #3d5270;
  --track: #334155;
  --row-hover: #182433;
  --row-selected: #1a3348;
  --row-selected-hover: #214056;
  --nav-selected: #12343a;
  --header-row: #152033;
  --splitter: #1b2838;
  --selection: #1e3a4c;
  --idle: #64748b;
  --live: #34d399;
  --uploading: #38bdf8;
  --modified: #f59e0b;

  --radius: 6px;
  --radius-check: 4px;
  --radius-item: 8px;
  --radius-card: 10px;
  --radius-dialog: 12px;

  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-body: 13px;
  --fs-small: 11px;
  --fs-value: 14px;
  --fs-title: 18px;

  --header-h: 56px;
  --sidebar-w: 280px;
  --gap: 16px;
}

@media (max-width: 767px) {
  :root {
    --fs-body: 14px;
    --fs-small: 12px;
    --gap: 12px;
  }
}