/**
 * Motion Library Design Tokens
 * Default preset: Obsidian (visual parity with Cursor frontend)
 */
:root {
  /* Color */
  --ml-color-bg: #121212;
  --ml-color-surface: #202020;
  --ml-color-surface-2: #171717;
  --ml-color-text: #f5f5f5;
  --ml-color-muted: #ababab;
  --ml-color-border: #303030;
  --ml-color-accent: #9f7aea;
  --ml-color-parity: #a855f7;
  --ml-color-success: #22c55e;
  --ml-color-warning: #f59e0b;
  --ml-color-danger: #ef4444;
  --ml-color-primary-fg: #121212;

  /* Legacy aliases used by theme.css */
  --ml-bg: var(--ml-color-bg);
  --ml-text: var(--ml-color-text);
  --ml-muted: var(--ml-color-muted);
  --ml-border: var(--ml-color-border);
  --ml-accent: var(--ml-color-accent);
  --ml-surface: var(--ml-color-surface);
  --ml-parity: var(--ml-color-parity);
  --ml-primary-fg: var(--ml-color-primary-fg);

  /* Radius */
  --ml-radius-sm: 10px;
  --ml-radius-md: 12px;
  --ml-radius-lg: 16px;
  --ml-radius-xl: 20px;
  --ml-radius-2xl: 24px;
  --ml-radius-pill: 999px;

  /* Spacing scale */
  --ml-space-1: 4px;
  --ml-space-2: 8px;
  --ml-space-3: 12px;
  --ml-space-4: 16px;
  --ml-space-5: 24px;
  --ml-space-6: 32px;
  --ml-space-7: 48px;
  --ml-space-8: 64px;
  --ml-space-9: 80px;
  --ml-space-10: 120px;

  /* Shadow */
  --ml-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24);
  --ml-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --ml-shadow-glow: 0 0 40px rgba(207, 222, 246, 0.25);

  /* Layout */
  --ml-container: 1440px;
  --ml-container-narrow: 1100px;

  /* Motion */
  --ml-transition-fast: 150ms ease;
  --ml-transition-normal: 250ms ease;
  --ml-transition-slow: 400ms ease;

  /* Typography */
  --ml-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ml-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ml-font-size: 16px;
  --ml-heading-weight: 900;

  /* Z-index */
  --ml-z-nav: 50;
  --ml-z-modal: 80;
  --ml-z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ml-transition-fast: 0.01ms;
    --ml-transition-normal: 0.01ms;
    --ml-transition-slow: 0.01ms;
  }

  .ml-superpowers__glow,
  .ml-superpowers__text,
  .ms-superpowers-text,
  .ms-superpowers-glow {
    animation: none !important;
  }
}

/* Preset hooks (applied via body class from settings later) */
body.ml-preset-midnight {
  --ml-color-bg: #0a0a0a;
  --ml-color-surface: #141414;
  --ml-color-surface-2: #111111;
}
