/* sspro web: plain and Mac-like. Neutral greys, one blue for the next action;
   the colour on screen comes from the screenshots. Light and dark follow the
   system unless Settings pins one (data-theme on <html>). */

:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;

  --bg: #F5F5F7;
  --sidebar: #ECECEE;
  --surface: #FFFFFF;
  --surface-2: #F2F2F4;
  --stage: #E6E6EA;
  --hover: rgba(0, 0, 0, 0.045);
  --select: rgba(0, 0, 0, 0.075);
  --bar: rgba(245, 245, 247, 0.84);

  --ink: #1D1D1F;
  --ink-2: #6E6E73;
  --line: rgba(0, 0, 0, 0.1);
  --line-strong: rgba(0, 0, 0, 0.18);

  --accent: #0071E3;
  --on-accent: #FFFFFF;
  --accent-text: #0066CC;
  --accent-soft: rgba(0, 113, 227, 0.12);

  /* A paid call (Claude, kie.ai): one colour of its own, so a button that spends is never mistaken for one that does not. */
  --paid: #6E3FD6;
  --paid-text: #5B2FC2;
  --paid-soft: rgba(110, 63, 214, 0.13);

  --ok: #1A7F37;
  --ok-dot: #34C759;
  --warn: #A35200;
  --warn-dot: #FF9F0A;
  --warn-bg: #FFF5E6;
  --bad: #D70015;
  --bad-dot: #FF3B30;
  --bad-bg: #FFF0F0;

  --shadow-1: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 14px 36px rgba(0, 0, 0, 0.18);

  --r-sm: 6px;
  --r: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --control: 32px;
  --control-sm: 26px;
  --sidebar-w: 232px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1C1C1E;
    --sidebar: #232326;
    --surface: #2C2C2E;
    --surface-2: #353538;
    --stage: #131315;
    --hover: rgba(255, 255, 255, 0.06);
    --select: rgba(255, 255, 255, 0.1);
    --bar: rgba(28, 28, 30, 0.84);
    --ink: #F5F5F7;
    --ink-2: #AEAEB2;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.2);
    --accent-text: #4DA3FF;
    --accent-soft: rgba(10, 132, 255, 0.2);
    --paid: #8B63EA;
    --paid-text: #B59CFF;
    --paid-soft: rgba(139, 99, 234, 0.22);
    --ok: #32D74B;
    --warn: #FFB340;
    --warn-bg: rgba(255, 159, 10, 0.14);
    --bad: #FF6961;
    --bad-bg: rgba(255, 69, 58, 0.14);
    --shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 14px 36px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #1C1C1E;
  --sidebar: #232326;
  --surface: #2C2C2E;
  --surface-2: #353538;
  --stage: #131315;
  --hover: rgba(255, 255, 255, 0.06);
  --select: rgba(255, 255, 255, 0.1);
  --bar: rgba(28, 28, 30, 0.84);
  --ink: #F5F5F7;
  --ink-2: #AEAEB2;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --accent-text: #4DA3FF;
  --accent-soft: rgba(10, 132, 255, 0.2);
  --ok: #32D74B;
  --warn: #FFB340;
  --warn-bg: rgba(255, 159, 10, 0.14);
  --bad: #FF6961;
  --bad-bg: rgba(255, 69, 58, 0.14);
  --shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 14px 36px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}