:root {
  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Segoe UI", sans-serif;

  --ds-canvas: #f5f5f7;
  --ds-surface: #ffffff;
  --ds-surface-subtle: #f8f8fa;
  --ds-surface-raised: rgba(255, 255, 255, .88);
  --ds-fill: rgba(118, 118, 128, .10);
  --ds-fill-hover: rgba(118, 118, 128, .16);

  --ds-text: #1d1d1f;
  --ds-text-secondary: #6e6e73;
  --ds-text-tertiary: #8e8e93;

  --ds-line: rgba(60, 60, 67, .14);
  --ds-line-strong: rgba(60, 60, 67, .22);

  --ds-accent: #007aff;
  --ds-accent-hover: #006ee6;
  --ds-accent-soft: rgba(0, 122, 255, .10);

  --ds-success: #248a3d;
  --ds-success-soft: rgba(36, 138, 61, .10);
  --ds-warning: #b86e00;
  --ds-warning-soft: rgba(184, 110, 0, .11);
  --ds-danger: #d70015;
  --ds-danger-soft: rgba(215, 0, 21, .09);

  --ds-shadow-sm:
    0 1px 2px rgba(0, 0, 0, .04),
    0 2px 8px rgba(0, 0, 0, .035);
  --ds-shadow-md:
    0 8px 28px rgba(0, 0, 0, .075);

  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 22px;

  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;

  --ds-control-height: 44px;

  --ds-motion-fast: 120ms;
  --ds-motion-normal: 180ms;
  --ds-ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
  --ds-canvas: #0d1117;
  --ds-surface: #151a21;
  --ds-surface-subtle: #10151c;
  --ds-surface-raised: rgba(21, 26, 33, .90);
  --ds-fill: rgba(255, 255, 255, .07);
  --ds-fill-hover: rgba(255, 255, 255, .11);

  --ds-text: #f5f5f7;
  --ds-text-secondary: #a7a7ad;
  --ds-text-tertiary: #85858c;

  --ds-line: rgba(255, 255, 255, .10);
  --ds-line-strong: rgba(255, 255, 255, .16);

  --ds-accent: #0a84ff;
  --ds-accent-hover: #409cff;
  --ds-accent-soft: rgba(10, 132, 255, .14);

  --ds-success: #30d158;
  --ds-success-soft: rgba(48, 209, 88, .12);
  --ds-warning: #ffd60a;
  --ds-warning-soft: rgba(255, 214, 10, .10);
  --ds-danger: #ff453a;
  --ds-danger-soft: rgba(255, 69, 58, .11);

  --ds-shadow-sm: none;
  --ds-shadow-md: 0 10px 32px rgba(0, 0, 0, .24);
}

.ds-scope {
  font-family: var(--ds-font);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}