/* Design tokens — polished dark system (aligned to the iOS app's Termius aesthetic).
   Variable names preserved so every module's CSS keeps working; only the values are upgraded. */
:root {
  color-scheme: dark;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* surfaces / elevation — balanced-contrast ramp (2026-07-08 Island refresh):
     ground → canvas → raise → active. Each step visible against the last. */
  --bg: #17191e;
  --bg-grad: radial-gradient(1200px 600px at 80% -10%, rgba(46,204,154,0.05), transparent 60%), #17191e;
  --surface-1: #1e2127;   /* canvas / cards */
  --surface-2: #272b33;   /* raised: inputs, buttons, chips */
  --surface-3: #333945;   /* active / strongest elevation */
  --deck-bg: color-mix(in srgb, var(--surface-1) 86%, transparent);  /* frosted two-tier header —
      derived from the theme's own surface so every data-theme (incl. light) frosts correctly */
  --deck-h: 84px;         /* total deck height: tier1 46 + strip 38 (responsive.css adjusts) */

  --color-background-primary: var(--bg);
  --color-background-secondary: #1b1e26;
  --color-background-info: rgba(74, 143, 214, 0.14);
  --color-background-success: rgba(46, 204, 154, 0.14);
  --color-background-warn: rgba(212, 146, 42, 0.15);

  /* text */
  --color-text-primary: #f0f2f6;
  --color-text-secondary: #adb5c2;
  --color-text-tertiary: #6e7683;
  --color-text-info: #5aa2e8;
  --color-text-success: #2ecc9a;
  --color-text-danger: #e0606e;
  --color-text-warn: #e0a23a;

  /* borders */
  --color-border-secondary: rgba(255, 255, 255, 0.12);
  --color-border-tertiary: rgba(255, 255, 255, 0.07);

  --accent: #2ecc9a;
  --accent-text: #0b0c0f;
  --accent-dim: rgba(46, 204, 154, 0.15);

  --border-radius-md: 7px;
  --border-radius-lg: 12px;
  --border-radius-xl: 18px;  /* the elevated content canvas (#panel) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.4);
  --scrim: rgba(0, 0, 0, 0.55);   /* dim backdrop behind the mobile detail modal (jobs-detail.show) */
  --tap-min: 44px;        /* minimum touch-target size (Apple HIG); consumed by the
                             @media (pointer:coarse) block in css/responsive.css */

  /* interaction — row hover + selected (theme-aware; light themes override --hover-bg) */
  --hover-bg: rgba(255, 255, 255, 0.045);
  /* selection: pronounced, theme-aware (derives from whatever --accent the theme sets) */
  --selected-bg: color-mix(in srgb, var(--accent) 22%, transparent);

  /* pipeline-stage status palette */
  --st-done: #2ecc9a;
  --st-active: #d4922a;
  --st-next: #4a8fd6;
  --st-blocked: #d24b5a;
  --st-planned: #6b7280;
  --st-done-bg: rgba(46, 204, 154, 0.14);
  --st-active-bg: rgba(212, 146, 42, 0.14);
  --st-next-bg: rgba(74, 143, 214, 0.14);
  --st-blocked-bg: rgba(210, 75, 90, 0.15);
  --st-planned-bg: rgba(120, 129, 143, 0.13);

  /* semantic status → color — palette for the shared color helper + modules (theme-aware via the tokens above) */
  --urg-high: var(--st-blocked);
  --urg-med: var(--st-active);
  --urg-low: #d8c93a;
  --urg-none: var(--st-planned);
  --status-done: var(--accent);
  --status-active: var(--st-next);
  --status-new: #9b5fc9;
  --status-idle: var(--st-planned);
  --txn-in: var(--accent);
  --txn-out: var(--st-blocked);
}