:root,
html[data-theme="light"] {
  --c-bg: #f4f4f4;
  --c-surface: #ffffff;
  --c-surface-subtle: #f8f8f8;
  --c-border: #e0e0e0;
  --c-border-strong: #c6c6c6;
  --c-text-primary: #161616;
  --c-text-secondary: #525252;
  --c-text-on-dark: #ffffff;
  --c-interactive: #0f62fe;
  --c-interactive-hover: #0353e9;
  --c-success: #24a148;
  --c-danger: #da1e28;
  --c-warning-bg: #fff1f1;
  --c-warning-text: #a2191f;
  --c-header-bg: #161616;
  --c-focus: #0f62fe;
  --c-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  --state-unassigned-bg: #ffffff;
  --state-prep-bg: #b3e5fc;
  --state-ready-bg: #0d47a1;
  --state-end-bg: #757575;
  --state-call-bg: #d32f2f;
  --state-recovery-bg: #16a34a;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
}

html.dark,
html[data-theme="dark"] {
  --c-bg: #161616;
  --c-surface: #262626;
  --c-surface-subtle: #2d2d2d;
  --c-border: #393939;
  --c-border-strong: #525252;
  --c-text-primary: #f4f4f4;
  --c-text-secondary: #a8a8a8;
  --c-text-on-dark: #ffffff;
  --c-interactive: #4589ff;
  --c-interactive-hover: #78a9ff;
  --c-success: #42be65;
  --c-danger: #ff8389;
  --c-warning-bg: #3f2021;
  --c-warning-text: #ffb3b8;
  --c-header-bg: #161616;
  --c-focus: #78a9ff;
  --c-shadow: 0 10px 30px rgba(0, 0, 0, 0.34);

  --state-unassigned-bg: #24242b;
  --state-prep-bg: rgba(82, 154, 190, 0.28);
  --state-ready-bg: rgba(35, 87, 173, 0.30);
  --state-end-bg: rgba(120, 120, 132, 0.24);
  --state-call-bg: rgba(211, 47, 47, 0.22);
  --state-recovery-bg: rgba(22, 163, 74, 0.22);
}