:root,
:root[data-theme="light"] {
    --brand-primary: #461A53;
    --brand-primary-hover: #5B3B73;
    --brand-secondary: #6A5FA3;
    --brand-muted: #4E4271;
    --brand-ink: #2C182F;
    --brand-accent: #7A5FA8;
    --brand-accent-soft: #8B86C9;

    --brand-primary-rgb: 70, 26, 83;
    --brand-primary-hover-rgb: 91, 59, 115;
    --brand-secondary-rgb: 106, 95, 163;
    --brand-muted-rgb: 78, 66, 113;
    --brand-ink-rgb: 44, 24, 47;
    --brand-accent-rgb: 122, 95, 168;
    --brand-accent-soft-rgb: 139, 134, 201;

    --brand-bg-tint: #F5F2FA;
    --brand-bg-muted: #EEEAF6;
    --brand-card: #FFFFFF;
    --brand-card-soft: rgba(255, 255, 255, 0.78);
    --brand-glass: rgba(255, 255, 255, 0.72);
    --brand-border: #D8D2E8;
    --brand-border-strong: #C8BEDD;
    --brand-text-primary: #2C182F;
    --brand-text-secondary: #5F5A72;
    --brand-text-inverse: #F8F4FC;
    --brand-shadow-soft: 0 16px 36px rgba(70, 26, 83, 0.10);
    --brand-shadow-medium: 0 22px 52px rgba(70, 26, 83, 0.14);
    --brand-shadow-large: 0 28px 80px rgba(70, 26, 83, 0.18);
    --brand-gradient-primary: linear-gradient(135deg, #461A53 0%, #6A5FA3 100%);
    --brand-gradient-surface: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(238, 234, 246, 0.92));
    --brand-gradient-page:
        radial-gradient(circle at top left, rgba(106, 95, 163, 0.16), transparent 35%),
        radial-gradient(circle at 84% 18%, rgba(139, 134, 201, 0.18), transparent 30%),
        linear-gradient(180deg, #faf8fd 0%, #f5f2fa 48%, #ffffff 100%);

    --page-bg: var(--brand-bg-tint);
    --surface: var(--brand-glass);
    --surface-strong: var(--brand-card);
    --text-main: var(--brand-text-primary);
    --text-soft: var(--brand-text-secondary);
    --bs-body-color: var(--brand-text-primary);
    --bs-secondary-color: var(--brand-text-secondary);
    --accent: var(--brand-accent);
    --accent-dark: var(--brand-primary);
    --accent-light: #F0EAF8;
    --line: rgba(var(--brand-secondary-rgb), 0.16);
    --shadow: var(--brand-shadow-large);

    color-scheme: light;
}

:root[data-theme="dark"] {
    --brand-bg-tint: #18121F;
    --brand-bg-muted: #22182A;
    --brand-card: #241B2D;
    --brand-card-soft: rgba(36, 27, 45, 0.84);
    --brand-glass: rgba(28, 21, 36, 0.78);
    --brand-border: rgba(139, 134, 201, 0.18);
    --brand-border-strong: rgba(139, 134, 201, 0.28);
    --brand-text-primary: #FBF8FF;
    --brand-text-secondary: #D8D1E5;
    --brand-text-inverse: #F8F4FC;
    --brand-shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.34);
    --brand-shadow-medium: 0 22px 52px rgba(0, 0, 0, 0.42);
    --brand-shadow-large: 0 28px 80px rgba(0, 0, 0, 0.48);
    --brand-gradient-surface: linear-gradient(160deg, rgba(36, 27, 45, 0.96), rgba(24, 18, 31, 0.94));
    --brand-gradient-page:
        radial-gradient(circle at top left, rgba(106, 95, 163, 0.18), transparent 35%),
        radial-gradient(circle at 84% 18%, rgba(70, 26, 83, 0.28), transparent 30%),
        linear-gradient(180deg, #15101b 0%, #18121f 50%, #201726 100%);

    --page-bg: var(--brand-bg-tint);
    --surface: var(--brand-glass);
    --surface-strong: var(--brand-card);
    --text-main: var(--brand-text-primary);
    --text-soft: var(--brand-text-secondary);
    --bs-body-color: var(--brand-text-primary);
    --bs-secondary-color: var(--brand-text-secondary);
    --accent: #8B86C9;
    --accent-dark: #F5F1FA;
    --accent-light: rgba(139, 134, 201, 0.18);
    --line: rgba(var(--brand-accent-soft-rgb), 0.22);
    --shadow: var(--brand-shadow-large);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --brand-bg-tint: #18121F;
        --brand-bg-muted: #22182A;
        --brand-card: #241B2D;
        --brand-card-soft: rgba(36, 27, 45, 0.84);
        --brand-glass: rgba(28, 21, 36, 0.78);
        --brand-border: rgba(139, 134, 201, 0.18);
        --brand-border-strong: rgba(139, 134, 201, 0.28);
        --brand-text-primary: #FBF8FF;
        --brand-text-secondary: #D8D1E5;
        --brand-text-inverse: #F8F4FC;
        --brand-shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.34);
        --brand-shadow-medium: 0 22px 52px rgba(0, 0, 0, 0.42);
        --brand-shadow-large: 0 28px 80px rgba(0, 0, 0, 0.48);
        --brand-gradient-surface: linear-gradient(160deg, rgba(36, 27, 45, 0.96), rgba(24, 18, 31, 0.94));
        --brand-gradient-page:
            radial-gradient(circle at top left, rgba(106, 95, 163, 0.18), transparent 35%),
            radial-gradient(circle at 84% 18%, rgba(70, 26, 83, 0.28), transparent 30%),
            linear-gradient(180deg, #15101b 0%, #18121f 50%, #201726 100%);

        --page-bg: var(--brand-bg-tint);
        --surface: var(--brand-glass);
        --surface-strong: var(--brand-card);
        --text-main: var(--brand-text-primary);
        --text-soft: var(--brand-text-secondary);
        --bs-body-color: var(--brand-text-primary);
        --bs-secondary-color: var(--brand-text-secondary);
        --accent: #8B86C9;
        --accent-dark: #F5F1FA;
        --accent-light: rgba(139, 134, 201, 0.18);
        --line: rgba(var(--brand-accent-soft-rgb), 0.22);
        --shadow: var(--brand-shadow-large);

        color-scheme: dark;
    }
}

body {
    font-family: 'Segoe UI', sans-serif;
}

a {
    color: var(--brand-primary);
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    color: var(--brand-primary-hover);
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--brand-secondary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-muted);
    --bs-btn-active-border-color: var(--brand-muted);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.15);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-secondary);
    --bs-btn-disabled-border-color: var(--brand-secondary);
}

.text-lavender {
    --bs-text-opacity: 1;
    color: var(--brand-primary) !important;
}

.section-1 {
    height: 30rem;
}

.border-lavender {
    --bs-border-opacity: 1;
    --bs-border-color: var(--brand-primary) !important;
}