/* ==========================================================================
   Chill Semitone Hub - shared design tokens
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Brand (Workshop palette) */
  --accent: #d4845a;
  --gradient: linear-gradient(135deg, #8b5cf6 0%, #d946ef 38%, #f97316 68%, #22d3ee 100%);
  --accent-glow: rgba(212, 132, 90, 0.16);
  --accent-glow-strong: rgba(212, 132, 90, 0.35);
  --silver-glow: rgba(154, 144, 128, 0.12);

  /* Surfaces */
  --bg: #0a1628;
  --bg-shift: #0d1a30;
  --surface: linear-gradient(160deg, rgba(18, 28, 46, 0.88) 0%, rgba(10, 22, 40, 0.82) 100%);
  --surface-solid: #121c2e;

  /* Lines */
  --border: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(212, 132, 90, 0.32);

  /* Text */
  --text: #ebe4d8;
  --silver: #9a9080;
  --text-subtle: #6a6258;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  /* Motion — EL-3 tokens (see platform/shared/scripts/motion.js) */
  --motion-fast: 120ms;
  --motion-normal: 220ms;
  --motion-large: 400ms;
  --motion-ambient: 1200ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: var(--motion-normal) var(--motion-ease);
  --flow-ease: cubic-bezier(0.4, 0, 0.15, 1);
  --flow-duration: 0.48s;

  /* Type */
  --font-sans: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Cascadia Mono', 'Segoe UI Mono', Consolas, monospace;

  /* Semantic aliases (overlays + legacy workshop) */
  --card: var(--surface-solid);
  --muted: var(--silver);
  --radius: var(--radius-lg);
}