/* Vibrant skin - bold and playful: saturated teal/coral, fully rounded pill shapes, bigger
   type. Colors chosen to keep WCAG AA contrast against both surface colors. */
:root[data-skin="vibrant"] {
    --font-display: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 999px;
    --radius-sm: 999px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --color-bg: #fbf7ff;
    --color-surface: #ffffff;
    --color-surface-alt: #f1e7ff;
    --color-border: #e2d3fb;
    --color-text: #241a38;
    --color-text-muted: #6a5c85;
    --color-primary: #7c3aed;
    --color-primary-contrast: #ffffff;
    --color-primary-tint: rgba(124, 58, 237, 0.1);
    --color-glow-rgb: 124, 58, 237;
    --color-accent: #e2478a;
    --color-danger: #d93650;
    --color-danger-bg: #fde7ea;
    --color-focus: #e2478a;

    --shadow-btn: 0 6px 18px rgba(124, 58, 237, 0.35);
    --shadow-btn-hover: 0 10px 24px rgba(124, 58, 237, 0.45);
    --shadow-card: 0 2px 4px rgba(36, 26, 56, 0.05), 0 12px 28px rgba(124, 58, 237, 0.08);
    --shadow-card-hover: 0 4px 8px rgba(36, 26, 56, 0.08), 0 18px 36px rgba(124, 58, 237, 0.14);
}

:root[data-skin="vibrant"][data-color-mode="dark"] {
    --color-bg: #1a1027;
    --color-surface: #241834;
    --color-surface-alt: #2d1f40;
    --color-border: #422f5c;
    --color-text: #f3ecff;
    --color-text-muted: #bcaad9;
    --color-primary: #a67bf5;
    --color-primary-contrast: #1a1027;
    --color-primary-tint: rgba(166, 123, 245, 0.18);
    --color-glow-rgb: 166, 123, 245;
    --color-accent: #f472ac;
    --color-danger: #f37788;
    --color-danger-bg: #3a1c26;
    --color-focus: #f472ac;

    --shadow-btn: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-btn-hover: 0 10px 24px rgba(0, 0, 0, 0.55);
    --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35);
    --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 18px 36px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root[data-skin="vibrant"]:not([data-color-mode="light"]) {
        --color-bg: #1a1027;
        --color-surface: #241834;
        --color-surface-alt: #2d1f40;
        --color-border: #422f5c;
        --color-text: #f3ecff;
        --color-text-muted: #bcaad9;
        --color-primary: #a67bf5;
        --color-primary-contrast: #1a1027;
        --color-primary-tint: rgba(166, 123, 245, 0.18);
        --color-glow-rgb: 166, 123, 245;
        --color-accent: #f472ac;
        --color-danger: #f37788;
        --color-danger-bg: #3a1c26;
        --color-focus: #f472ac;
        --shadow-btn: 0 6px 18px rgba(0, 0, 0, 0.45);
        --shadow-btn-hover: 0 10px 24px rgba(0, 0, 0, 0.55);
        --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35);
        --shadow-card-hover: 0 4px 8px rgba(0, 0, 0, 0.35), 0 18px 36px rgba(0, 0, 0, 0.45);
    }
}

:root[data-skin="vibrant"] .choice,
:root[data-skin="vibrant"] .q-select,
:root[data-skin="vibrant"] .q-input {
    border-radius: var(--radius-lg);
}