/* Generated from DesignSystem/design-tokens.json. Do not edit directly. */
:root {
  --color-background-canvas: #050617;
  --color-background-deep: #02030c;
  --color-background-canvas-glass: rgba(5, 6, 23, 0.78);
  --color-background-canvas-opaque: rgba(5, 6, 23, 0.96);
  --color-surface-default: #0b0e2a;
  --color-surface-default-glass: rgba(11, 14, 42, 0.82);
  --color-surface-default-opaque: rgba(11, 14, 42, 0.94);
  --color-surface-subtle: #111643;
  --color-surface-subtle-glass: rgba(17, 22, 67, 0.84);
  --color-surface-subtle-opaque: rgba(17, 22, 67, 0.96);
  --color-surface-raised: #171d52;
  --color-text-primary: #f7fbff;
  --color-text-on-accent: #ffffff;
  --color-text-on-media: rgba(255, 255, 255, 0.86);
  --color-text-on-media-muted: rgba(255, 255, 255, 0.52);
  --color-text-secondary: #b8c0e7;
  --color-text-secondary-tint: rgba(184, 192, 231, 0.16);
  --color-text-inverse: #050617;
  --color-text-disabled: #777fad;
  --color-border-default: rgba(139, 95, 255, 0.32);
  --color-border-strong: rgba(139, 95, 255, 0.56);
  --color-overlay-scrim: rgba(2, 3, 12, 0.72);
  --color-overlay-scrim-soft: rgba(2, 3, 12, 0.42);
  --color-overlay-scrim-strong: rgba(2, 3, 12, 0.93);
  --color-shadow-soft: rgba(0, 0, 0, 0.18);
  --color-shadow-default: rgba(0, 0, 0, 0.34);
  --color-shadow-strong: rgba(0, 0, 0, 0.40);
  --color-shadow-text: rgba(0, 0, 0, 0.72);
  --color-surface-overlay-subtle: rgba(255, 255, 255, 0.04);
  --color-surface-overlay: rgba(255, 255, 255, 0.06);
  --color-surface-overlay-strong: rgba(255, 255, 255, 0.10);
  --color-surface-overlay-emphasis: rgba(255, 255, 255, 0.12);
  --color-border-on-dark-subtle: rgba(255, 255, 255, 0.14);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);
  --color-border-on-dark-strong: rgba(255, 255, 255, 0.18);
  --color-border-on-dark-emphasis: rgba(255, 255, 255, 0.46);
  --color-brand-primary: #8f3dff;
  --color-brand-primary-hover: #9444ff;
  --color-brand-primary-pressed: #7426df;
  --color-brand-cyan: #19c8ff;
  --color-brand-magenta: #f05dff;
  --color-brand-text: #d7c1ff;
  --color-brand-tint-strong: rgba(143, 61, 255, 0.18);
  --color-brand-surface: rgba(143, 61, 255, 0.16);
  --color-information-surface-soft: rgba(25, 200, 255, 0.10);
  --color-information-surface-subtle: rgba(25, 200, 255, 0.08);
  --color-information-surface: rgba(25, 200, 255, 0.14);
  --color-information-surface-strong: rgba(25, 200, 255, 0.16);
  --color-information-surface-dense: rgba(25, 200, 255, 0.18);
  --color-information-aura: rgba(25, 200, 255, 0.20);
  --color-information-glow: rgba(25, 200, 255, 0.28);
  --color-information-border: rgba(25, 200, 255, 0.36);
  --color-information-border-strong: rgba(25, 200, 255, 0.42);
  --color-information-border-emphasis: rgba(25, 200, 255, 0.58);
  --color-information-emphasis: rgba(25, 200, 255, 0.72);
  --color-promoter-background: #031018;
  --color-promoter-background-mid: #061421;
  --color-promoter-overlay-soft: rgba(3, 16, 24, 0.34);
  --color-promoter-overlay: rgba(3, 16, 24, 0.86);
  --color-promoter-overlay-strong: rgba(3, 16, 24, 0.94);
  --color-promoter-surface: #071b28;
  --color-promoter-surface-subtle: #0b2638;
  --color-promoter-accent: #19c8ff;
  --color-promoter-border: rgba(25, 200, 255, 0.34);
  --color-promoter-tint: rgba(25, 200, 255, 0.12);
  --color-artist-background: #120719;
  --color-artist-background-mid: #180b24;
  --color-artist-overlay-soft: rgba(18, 7, 25, 0.34);
  --color-artist-overlay: rgba(18, 7, 25, 0.86);
  --color-artist-overlay-strong: rgba(18, 7, 25, 0.94);
  --color-artist-surface: #1d0d2a;
  --color-artist-surface-subtle: #2a123b;
  --color-artist-accent: #f05dff;
  --color-artist-border: rgba(240, 93, 255, 0.34);
  --color-artist-tint: rgba(240, 93, 255, 0.12);
  --color-artist-tint-strong: rgba(240, 93, 255, 0.16);
  --color-artist-aura: rgba(240, 93, 255, 0.20);
  --color-success: #38c770;
  --color-success-text: #b6ffd0;
  --color-success-tint: rgba(56, 199, 112, 0.10);
  --color-success-tint-strong: rgba(56, 199, 112, 0.22);
  --color-success-border: rgba(56, 199, 112, 0.44);
  --color-information: #19c8ff;
  --color-warning: #ffb340;
  --color-warning-tint: rgba(255, 179, 64, 0.15);
  --color-error: #ff6b8b;
  --color-error-text: #ff9aae;
  --color-error-tint: rgba(255, 107, 139, 0.16);
  --color-error-surface: rgba(255, 107, 139, 0.18);
  --color-error-border: rgba(255, 107, 139, 0.46);
  --color-disabled: #777fad;
  --color-commercial-highlight: #ffd566;
  --color-commercial-tint: rgba(255, 213, 102, 0.10);
  --color-commercial-border: rgba(255, 213, 102, 0.45);
  --color-external-auth-google-text: #111111;
  --color-external-auth-google-surface-hover: #f4f4f4;
  --color-external-auth-apple-surface: #000000;
  --color-external-auth-apple-surface-hover: #161616;
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-display-large: clamp(2.75rem, 6vw, 4.5rem);
  --font-display-small: clamp(2.25rem, 4.5vw, 3.5rem);
  --font-heading-h1: clamp(2rem, 3.5vw, 3rem);
  --font-heading-h2: clamp(1.75rem, 3vw, 2.5rem);
  --font-heading-h3: 1.5rem;
  --font-heading-h4: 1.25rem;
  --font-body-large: 1.125rem;
  --font-body-default: 1rem;
  --font-body-small: 0.875rem;
  --font-label-default: 0.875rem;
  --font-label-action: 0.9375rem;
  --font-label-navigation: 0.875rem;
  --font-caption: 0.75rem;
  --font-overline: 0.8125rem;
  --font-code: 0.875rem;
  --line-height-display-large: 1;
  --line-height-display-small: 1.05;
  --line-height-heading-h1: 1.1;
  --line-height-heading-h2: 1.15;
  --line-height-heading-h3: 1.25;
  --line-height-heading-h4: 1.3;
  --line-height-body: 1.5;
  --line-height-body-large: 1.55;
  --line-height-label: 1.35;
  --line-height-action: 1.2;
  --line-height-caption: 1.4;
  --tracking-default: 0;
  --tracking-overline: 0.04em;
}