@layer base {
  :root {
    --platform-canvas: #f7f8f7;
    --platform-surface: #ffffff;
    --platform-surface-muted: #f5f7f6;
    --platform-border: #e2e8e5;
    --platform-button-border: #e2e8e5;
    --platform-text-on-accent: #ffffff;
    --platform-text: #18211d;
    --platform-text-muted: #52605a;
    --platform-focus: #059669;
    --platform-danger-text: #b91c1c;
    --platform-danger-soft: #fef2f2;
    --platform-danger-action: #dc2626;
    --platform-dialog-shadow: 0 14px 32px rgba(24, 33, 29, .12);
  }

  html[data-platform-theme="dark"] {
    --platform-canvas: #0d0f0e;
    --platform-surface: #151817;
    --platform-surface-muted: #1d211f;
    --platform-border: #303632;
    --platform-text: #b6c0ba;
    --platform-text-on-accent: var(--platform-text);
    --platform-action-background: #064e3b;
    --platform-action-hover: #043b2d;
    --platform-transition-action: #312e81;
    --platform-transition-action-hover: #27246b;
    --platform-text-muted: #b6c0ba;
    --platform-focus: #34d399;
    --platform-danger-text: #fca5a5;
    --platform-danger-soft: #3f1d1d;
    --platform-danger-action: #7f1d1d;
    --platform-dialog-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  }

  body.platform-canvas {
    background: var(--platform-canvas);
    color: var(--platform-text);
  }
}