:root {
  color-scheme: light;

  --color-studio: #32116c;
  --color-on-studio: #fffaf0;
  --color-studio-muted: #d6cae8;
  --color-studio-accent: #ffdb43;
  --color-bg: #f6f4ee;
  --color-surface: #fffefa;
  --color-surface-subtle: #eeebf5;
  --color-text: #1c1038;
  --color-text-muted: #675d7b;
  --color-border: #ded9e6;
  --color-primary: #4316bd;
  --color-primary-hover: #310b91;
  --color-primary-glow: #6c38ef;
  --color-primary-gradient: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-glow)
  );
  --color-on-primary: #ffffff;
  --color-accent: #ffc400;
  --color-accent-soft: #fff0a3;
  --color-audio: #e95509;
  --color-audio-glow: #ff8a1f;
  --color-audio-gradient: linear-gradient(
    135deg,
    var(--color-audio),
    var(--color-audio-glow)
  );
  --color-on-audio: #211033;
  --color-success: #247556;
  --color-warning: #9b5b00;
  --color-error: #bd313d;
  --color-focus: #f0a900;

  --color-ink: #1c1038;
  --color-paper: #f6f4ee;
  --color-cobalt: #4316bd;
  --color-teal: #e95509;
  --color-orange: #ffc400;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.35rem;
  --shadow-raised: 0 18px 44px
    color-mix(in srgb, var(--color-primary) 16%, transparent);
  --shadow-ink: 0 10px 28px
    color-mix(in srgb, var(--color-text) 10%, transparent);
  --grid-size: 24px;

  --duration-fast: 120ms;
  --duration-normal: 180ms;
  --duration-slow: 240ms;
  --duration-enter: 240ms;
  --duration-spectrum: 80ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-display: "Bricolage Grotesque", var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-body: 1rem;
  --text-lg: 1.125rem;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #14101e;
  --color-surface: #211a2e;
  --color-surface-subtle: #2e253e;
  --color-text: #fff9df;
  --color-text-muted: #c7b9dd;
  --color-border: #493d58;
  --color-primary: #ffd21a;
  --color-primary-hover: #ffe05a;
  --color-primary-glow: #ff9d0a;
  --color-primary-gradient: linear-gradient(
    135deg,
    var(--color-primary-glow),
    var(--color-primary)
  );
  --color-on-primary: #211033;
  --color-accent: #ff7a00;
  --color-accent-soft: #522907;
  --color-audio: #ff7a18;
  --color-audio-glow: #ffb12b;
  --color-audio-gradient: linear-gradient(
    135deg,
    var(--color-audio-glow),
    var(--color-audio)
  );
  --color-on-audio: #0f172a;
  --color-success: #8bd8a7;
  --color-warning: #ffd166;
  --color-error: #ff8d94;
  --color-focus: #ffd21a;
  --color-ink: #fff9df;
  --color-paper: #14101e;
  --color-cobalt: #ffd21a;
  --color-teal: #ff7a18;
  --color-orange: #ff9d0a;
}