:root {
  color-scheme: dark;

  --font-family-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", system-ui, sans-serif;
  --font-family: var(--font-family-system);
  --font-family-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-size-caption2: 0.6875rem;
  --text-size-caption1: 0.75rem;
  --text-size-footnote: 0.8125rem;
  --text-size-subhead: 0.9375rem;
  --text-size-body: 1.0625rem;
  --text-size-callout: 1rem;
  --text-size-headline: 1.0625rem;
  --text-size-title3: 1.25rem;
  --text-size-title2: 1.375rem;
  --text-size-title1: 1.75rem;
  --text-size-large-title: 2.125rem;

  --text-weight-regular: 400;
  --text-weight-medium: 500;
  --text-weight-semibold: 600;
  --text-weight-bold: 700;
  --line-tight: 1.2;
  --line-body: 1.35;
  --line-relaxed: 1.5;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;

  --control-height-sm: 36px;
  --control-height: 44px;
  --control-height-lg: 50px;
  --control-pad-x: 16px;
  --control-gap: 8px;
  --icon-size: 22px;
  --icon-size-sm: 18px;
  --icon-size-lg: 28px;

  --btn-size: var(--control-height);
  --btn-corner-factor: 44.53125;
  --btn-radius: calc((var(--btn-size) / 2) * var(--btn-corner-factor));

  --label-primary: #ffffff;
  --label-secondary: #98989d;
  --label-tertiary: #636366;
  --label-quaternary: #48484a;
  --label-on-accent: #1c1c1e;

  --fill-primary: #1c1c1e;
  --fill-secondary: #2c2c2e;
  --fill-tertiary: #3a3a3c;
  --fill-quaternary: #48484a;
  --fill-elevated: #1c1c1e;
  --fill-grouped: #000000;
  --fill-input: #2c2c2e;

  --separator: rgba(255, 255, 255, 0.08);
  --separator-opaque: #38383a;
  --overlay-scrim: rgba(0, 0, 0, 0.55);

  --border-width: 0.5px;
  --border-subtle: var(--border-width) solid var(--separator);

  --accent: #ffffff;
  --accent-hover: #e5e5ea;
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-link: #ffffff;

  --system-blue: #ffffff;
  --system-green: #30d158;
  --system-indigo: #5e5ce6;
  --system-purple: #bf5af2;
  --system-orange: #ff9f0a;
  --system-red: #ff453a;
  --system-yellow: #ffd60a;
  --system-gray: #8e8e93;
  --system-gray2: #636366;
  --system-gray3: #48484a;
  --system-gray4: #3a3a3c;
  --system-gray5: #2c2c2e;
  --system-gray6: #1c1c1e;

  --chart-plays: var(--system-purple);
  --chart-sales: var(--system-blue);
  --chart-profit: var(--system-green);
  --chart-followers: #ff375f;
  --chart-likes: var(--system-orange);

  --verified: var(--system-blue);
  --verified-paid: var(--system-yellow);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 280ms;
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --bg: var(--fill-grouped);
  --bg-secondary: var(--fill-secondary);
  --text: var(--label-primary);
  --text-secondary: var(--label-secondary);
  --text-tertiary: var(--label-tertiary);
  --text-muted: var(--label-tertiary);
  --card: var(--fill-elevated);
  --card-secondary: var(--fill-secondary);
  --border: var(--separator-opaque);
  --border-secondary: var(--system-gray4);
  --border-hover: var(--system-gray3);
  --header-bg: rgba(0, 0, 0, 0.72);
  --header-border: var(--separator);
  --popup-bg: var(--fill-elevated);
  --popup-border: var(--separator-opaque);
  --input-bg: var(--fill-input);
  --input-bg-focus: var(--fill-input);
  --input-border: transparent;
  --input-border-focus: var(--system-blue);
  --button-primary-bg: var(--accent);
  --button-primary-text: var(--label-on-accent);
  --button-secondary-bg: var(--fill-secondary);
  --button-secondary-text: var(--label-primary);
  --button-hover-bg: color-mix(in srgb, var(--label-primary) 8%, var(--fill-secondary));
  --alert-warning-bg: color-mix(in srgb, var(--system-orange) 18%, var(--fill-elevated));
  --alert-warning-border: color-mix(in srgb, var(--system-orange) 35%, transparent);
  --alert-warning-text: color-mix(in srgb, var(--system-orange) 72%, var(--label-primary));
  --alert-error-bg: color-mix(in srgb, var(--system-red) 16%, var(--fill-elevated));
  --alert-error-border: color-mix(in srgb, var(--system-red) 32%, transparent);
  --alert-error-text: var(--system-red);
  --alert-success-bg: color-mix(in srgb, var(--system-green) 16%, var(--fill-elevated));
  --alert-success-border: color-mix(in srgb, var(--system-green) 32%, transparent);
  --alert-success-text: color-mix(in srgb, var(--system-green) 65%, var(--label-primary));
  --shadow-color: rgba(0, 0, 0, 0.35);

  --bm-black: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 1ms;
    --motion-normal: 1ms;
    --motion-slow: 1ms;
  }
}