:root {
    color-scheme: dark;

    --rs-bg-canvas: #0d0d1a;
    --rs-bg-player: #000000;
    --rs-surface-1: #171724;
    --rs-surface-2: #222231;
    --rs-surface-hover: rgba(255, 255, 255, 0.07);
    --rs-surface-pressed: rgba(255, 255, 255, 0.11);
    --rs-border-subtle: rgba(255, 255, 255, 0.08);
    --rs-border-strong: rgba(255, 255, 255, 0.14);
    --rs-text-primary: #f5f5f7;
    --rs-text-secondary: #aeaeb2;
    --rs-text-tertiary: #9b9baa;
    --rs-accent: #e94560;
    --rs-accent-hover: #d13b54;
    --rs-accent-soft: rgba(233, 69, 96, 0.14);
    --rs-success: #30d158;
    --rs-warning: #ff9f0a;
    --rs-danger: #ff6b6b;
    --rs-danger-soft: rgba(255, 107, 107, 0.12);
    --rs-info: #0a84ff;

    --rs-space-1: 4px;
    --rs-space-2: 8px;
    --rs-space-3: 12px;
    --rs-space-4: 16px;
    --rs-space-6: 24px;
    --rs-space-8: 32px;
    --rs-space-12: 48px;

    --rs-radius-control: 8px;
    --rs-radius-card: 12px;
    --rs-radius-dialog: 16px;
    --rs-control-height: 44px;
    --rs-focus-ring: 0 0 0 2px var(--rs-bg-canvas), 0 0 0 4px var(--rs-accent);
}

/* Shared button anatomy. Product pages opt in by adding rs-button classes. */
.rs-button {
    appearance: none;
    min-height: var(--rs-control-height);
    min-width: var(--rs-control-height);
    padding: 0 var(--rs-space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rs-space-2);
    border: 1px solid transparent;
    border-radius: var(--rs-radius-control);
    color: var(--rs-text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color 150ms ease, border-color 150ms ease,
                color 150ms ease, opacity 150ms ease, transform 100ms ease;
}

.rs-button--primary {
    background: var(--rs-accent);
    border-color: var(--rs-accent);
    color: var(--rs-bg-canvas);
}

.rs-button--secondary {
    background: var(--rs-surface-hover);
    border-color: var(--rs-border-strong);
    color: var(--rs-text-primary);
}

.rs-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--rs-text-secondary);
}

.rs-button--danger {
    background: var(--rs-danger-soft);
    border-color: rgba(255, 107, 107, 0.3);
    color: var(--rs-danger);
}

.rs-button--icon {
    width: var(--rs-control-height);
    height: var(--rs-control-height);
    padding: 0;
    flex: 0 0 var(--rs-control-height);
    border-radius: 50%;
}

@media (hover: hover) and (pointer: fine) {
    .rs-button--primary:hover { background: var(--rs-accent); border-color: var(--rs-accent); }
    .rs-button--secondary:hover { background: var(--rs-surface-pressed); }
    .rs-button--ghost:hover { background: var(--rs-surface-hover); color: var(--rs-text-primary); }
    .rs-button--danger:hover { background: rgba(255, 107, 107, 0.18); border-color: var(--rs-danger); }
}

.rs-button:active:not(:disabled),
.rs-button.is-active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.rs-button:focus-visible { outline: none; box-shadow: var(--rs-focus-ring); }
.rs-button:disabled,
.rs-button[aria-disabled="true"] {
    background: var(--rs-surface-hover);
    border-color: var(--rs-border-subtle);
    color: var(--rs-text-tertiary);
    opacity: 1;
    cursor: not-allowed;
    transform: none;
}

.rs-button[aria-busy="true"] { cursor: progress; }
.rs-button[aria-busy="true"]::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: rs-button-spin 700ms linear infinite;
}

.rs-button.is-success,
.rs-button.copied {
    background: var(--rs-success);
    border-color: var(--rs-success);
    color: var(--rs-bg-canvas);
}

@keyframes rs-button-spin { to { transform: rotate(360deg); } }

/* Shared form control states. */
.rs-control {
    min-height: var(--rs-control-height);
    border: 1px solid var(--rs-border-strong);
    border-radius: var(--rs-radius-control);
    background: var(--rs-surface-hover);
    color: var(--rs-text-primary);
    font: inherit;
    font-size: 16px;
    line-height: 20px;
    outline: none;
    transition: background-color 150ms ease, border-color 150ms ease,
                box-shadow 150ms ease;
}

.rs-control:hover { background: var(--rs-surface-pressed); }
.rs-control:focus-visible { border-color: var(--rs-accent); box-shadow: var(--rs-focus-ring); }
.rs-control:disabled { opacity: 0.46; cursor: not-allowed; }
.rs-control[aria-invalid="true"],
.rs-control.is-error { border-color: var(--rs-danger); }
.rs-control[aria-invalid="true"]:focus-visible,
.rs-control.is-error:focus-visible {
    box-shadow: 0 0 0 2px var(--rs-bg-canvas), 0 0 0 4px var(--rs-danger);
}

.rs-field-feedback {
    margin-top: var(--rs-space-2);
    color: var(--rs-text-tertiary);
    font-size: 12px;
    line-height: 18px;
}
.rs-field-feedback--error { color: var(--rs-danger); }
.rs-field-feedback--success { color: var(--rs-success); }

@media (prefers-reduced-motion: reduce) {
    .rs-button,
    .rs-control { transition: none; }
    .rs-button:active:not(:disabled),
    .rs-button.is-active:not(:disabled) { transform: none; }
    .rs-button[aria-busy="true"]::before { animation-duration: 1400ms; }
}