:root {
    --theme-primary: #ad68e4;
    --theme-primary-strong: #7d45a2;
    --theme-primary-soft: #f3e8ff;
    --theme-secondary: #68e4ad;
    --theme-secondary-strong: #54c08f;
    --theme-secondary-soft: #e6fbf1;
    --theme-tertiary: #e4ad68;
    --theme-tertiary-strong: #c68d43;
    --theme-tertiary-soft: #fdf2e3;
    --theme-accent-dark: #1f2937;
    --theme-accent-darker: #111827;
    --theme-text: #333333;
    --theme-text-muted: #666666;
    --theme-text-subtle: #989898;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f4f4f4;
    --theme-surface-muted: #fefefe;
    --theme-border: #dddddd;
    --theme-border-strong: #aaaaaa;
    --theme-border-muted: #eeeeee;
    --theme-input-border: #666666;
    --theme-overlay: rgba(0, 0, 0, 0.9);
    --theme-overlay-soft: rgba(0, 0, 0, 0.5);
    --theme-shadow-soft: 0 2px 5px rgba(0, 0, 0, 0.1);
    --theme-shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --theme-shadow-strong: 0 0 20px rgba(0, 0, 0, 0.5);
    --theme-star-empty: rgb(209 213 219 / 1);
    --theme-feedback-success: #16a34a;
    --theme-link-hover: #0056b3;
}

.theme-select-input {
    border: none;
    background-color: var(--theme-primary);
    color: var(--theme-surface);
}

.theme-option-input {
    background-color: var(--theme-primary);
    color: var(--theme-surface);
}

.theme-option-input:hover {
    background-color: var(--theme-secondary);
}

.theme-button-primary {
    background-color: var(--theme-primary);
    color: var(--theme-surface);
}

.theme-button-primary:hover {
    background-color: var(--theme-primary-strong);
}

.theme-button-secondary {
    background-color: var(--theme-secondary-strong);
    color: var(--theme-surface);
}

.theme-button-secondary:hover {
    background-color: var(--theme-secondary);
}

.theme-button-tertiary {
    background-color: var(--theme-tertiary);
    color: var(--theme-accent-darker);
}

.theme-bg-primary {
    background-color: var(--theme-primary);
}

.theme-text-primary {
    color: var(--theme-primary);
}

.theme-text-secondary {
    color: var(--theme-secondary);
}

.theme-text-tertiary {
    color: var(--theme-tertiary);
}

.theme-border-primary {
    border-color: var(--theme-primary);
}

.theme-focus:focus {
    --tw-ring-color: var(--theme-primary);
    border-color: var(--theme-primary);
}