/* X420 Design System — canonical tokens (dark-first)
 * Source: DESIGN_SYSTEM_X420.md §3.2
 * Phase 0 ships the file; pages may keep legacy aliases while migrating.
 */
:root {
  color-scheme: dark light;

  /* Canvas — dark-first (AI entry) */
  --x420-bg: #0b0c0f;
  --x420-bg-elevated: #111318;
  --x420-bg-input: #181b20;
  --x420-fg: #f5f6f7;
  --x420-muted: #97a1ac;
  --x420-line: #2a2f38;
  --x420-line-soft: color-mix(in srgb, var(--x420-line) 70%, transparent);

  /* Brand — ONE accent */
  --x420-accent: #6d5dfc;
  --x420-accent-2: #8b5cf6; /* gradient end only; do not use alone as second brand */
  --x420-focus: var(--x420-accent); /* replace Apple blue #0a84ff */

  /* Semantic */
  --x420-ok: #22c55e;
  --x420-warn: #f59e0b;
  --x420-err: #ef4444;

  /* Controls */
  --x420-btn: #3d4148;
  --x420-btn-txt: #f5f6f7;
  --x420-btn-hover: #4b5058;
  --x420-btn-primary-bg: var(--x420-accent);
  --x420-btn-primary-fg: #ffffff;

  /* Radius — AI entry scale */
  --x420-radius-xs: 8px;
  --x420-radius-sm: 10px;   /* inputs */
  --x420-radius-md: 12px;   /* buttons */
  --x420-radius-lg: 14px;   /* cards */
  --x420-radius-xl: 20px;   /* modals / composer */
  --x420-radius-pill: 999px;

  /* Shadow */
  --x420-shadow-card: 0 18px 40px rgba(0, 0, 0, .35);
  --x420-shadow-btn: 0 10px 30px rgba(0, 0, 0, .45);
  --x420-shadow-input: inset 0 1px 0 rgba(255, 255, 255, .08);

  /* Glass (pay-modal / composer / voice) */
  --x420-glass-surface: rgba(13, 16, 22, .78);
  --x420-glass-surface-strong: rgba(20, 23, 31, .92);
  --x420-glass-edge: rgba(255, 255, 255, .105);
  --x420-glass-blur: 28px;

  /* Motion */
  --x420-motion-instant: 140ms;
  --x420-motion-fast: 220ms;
  --x420-motion-base: 360ms;
  --x420-motion-slow: 520ms;
  --x420-ease: cubic-bezier(.16, 1, .3, 1);

  /* Layout */
  --x420-chat-width: 820px;
  --x420-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --x420-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --x420-bg: #ffffff;
    --x420-bg-elevated: #f4f6fb;
    --x420-bg-input: #ffffff;
    --x420-fg: #0e1113;
    --x420-muted: #6b7280;
    --x420-line: #e5e7eb;
    --x420-btn: #111314;
    --x420-btn-txt: #ffffff;
    --x420-btn-hover: #0c0f10;
    --x420-shadow-card: 0 16px 36px rgba(0, 0, 0, .06);
    --x420-shadow-btn: 0 10px 26px rgba(0, 0, 0, .08);
    --x420-shadow-input: inset 0 1px 0 rgba(255, 255, 255, .65);
    --x420-glass-surface: rgba(255, 255, 255, .58);
    --x420-glass-surface-strong: rgba(255, 255, 255, .76);
    --x420-glass-edge: rgba(255, 255, 255, .82);
  }
}

/* Optional explicit override for “always dark product” shells */
[data-theme="dark"] {
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --x420-motion-instant: 0ms;
    --x420-motion-fast: 0ms;
    --x420-motion-base: 0ms;
    --x420-motion-slow: 0ms;
  }
}