/* MusicSeed shared visual tokens.
   Keep this vocabulary aligned with musicseed/web/src/app/tokens.css. */

:root {
  color-scheme: dark;

  --ms-canvas: #0b0d10;
  --ms-canvas-muted: #101318;
  --ms-surface: #15181d;
  --ms-surface-raised: #20242a;
  --ms-surface-code: #0a0c0f;
  --ms-text: #f5f3ed;
  --ms-text-muted: #c7c5be;
  --ms-text-subtle: #9a9a94;
  --ms-accent: #f2b632;
  --ms-accent-secondary: #ef7a24;
  --ms-accent-gradient: linear-gradient(120deg, #9d6500 0%, #bd4f18 100%);
  --ms-accent-soft: linear-gradient(120deg, rgba(242, 182, 50, 0.16), rgba(239, 122, 36, 0.16));
  --ms-accent-foreground: #ffffff;
  --ms-focus: rgba(242, 182, 50, 0.72);
  --ms-success: #4ade80;
  --ms-success-soft: rgba(74, 222, 128, 0.14);
  --ms-warning: #fbbf24;
  --ms-warning-soft: rgba(251, 191, 36, 0.14);
  --ms-danger: #f87171;
  --ms-danger-soft: rgba(248, 113, 113, 0.14);
  --ms-info: #60a5fa;
  --ms-info-soft: rgba(96, 165, 250, 0.14);
  --ms-border: rgba(255, 255, 255, 0.08);
  --ms-border-strong: rgba(255, 255, 255, 0.14);
  --ms-space-1: 4px;
  --ms-space-2: 8px;
  --ms-space-3: 12px;
  --ms-space-4: 16px;
  --ms-space-5: 24px;
  --ms-space-6: 32px;
  --ms-space-7: 48px;
  --ms-radius-sm: 8px;
  --ms-radius-control: 10px;
  --ms-radius-panel: 16px;
  --ms-radius-lg: 22px;
  --ms-radius-pill: 999px;
  --ms-shadow-panel: 0 18px 44px -20px rgba(242, 182, 50, 0.22);
  --ms-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.32);
  --ms-duration-fast: 150ms;
  --ms-duration-normal: 180ms;
  --ms-ease: ease;
  --ms-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ms-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

  /* Compatibility aliases for the existing static-site rules. */
  --bg: var(--ms-canvas);
  --bg-tint: var(--ms-canvas-muted);
  --surface: var(--ms-surface);
  --surface-2: var(--ms-surface-raised);
  --text: var(--ms-text);
  --text-soft: var(--ms-text-muted);
  --text-dim: var(--ms-text-subtle);
  --violet: var(--ms-accent);
  --pink: var(--ms-accent-secondary);
  --accent-grad: var(--ms-accent-gradient);
  --accent-grad-soft: var(--ms-accent-soft);
  --border: var(--ms-border);
  --border-strong: var(--ms-border-strong);
  --radius: var(--ms-radius-panel);
  --radius-lg: var(--ms-radius-lg);
  --font-sans: var(--ms-font-sans);
  --font-mono: var(--ms-font-mono);
}