/* Bootstrap CSS Custom Property Overrides */
/* This file demonstrates different approaches for avoiding duplication */

/* ========================================= */
/* APPROACH 1: Use :root for shared properties */
/* ========================================= */
/* Properties that should be the same in BOTH themes */
:root {
    /* Layout & Spacing - Same for both themes */
    --bs-border-radius: 0.375rem;
    --bs-border-radius-sm: 0.2rem;
    --bs-border-radius-lg: 0.5rem;
    --bs-border-radius-xl: 1rem;
}

/* ========================================= */
/* APPROACH 2: Light theme specific colors */
/* ========================================= */
:root,
[data-bs-theme=light] {
    /* Primary Colors - Light theme */
    --bs-primary: var(--brand-primary);
}

/* ========================================= */
/* APPROACH 3: Dark theme specific colors */
/* ========================================= */
[data-bs-theme=dark] {
    /* Primary Colors - Dark theme (using same brand color) */
    --bs-primary: var(--brand-primary);
}

/* ========================================= */
/* APPROACH 4: Using CSS selector grouping */
/* ========================================= */
/* Group selectors for properties that are identical */
:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    /* These properties are EXACTLY the same in all themes */
    --custom-transition-duration: 0.2s;
    --custom-transition-timing: ease-in-out;
    --custom-font-weight-medium: 500;
    --custom-font-weight-semibold: 600;
}

/* ========================================= */
/* Component-specific customizations */
/* ========================================= */
.btn {
    --bs-btn-border-radius: var(--bs-border-radius);
    font-weight: var(--custom-font-weight-medium);
    transition: all var(--custom-transition-duration) var(--custom-transition-timing);
}

.card {
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-box-shadow: var(--bs-box-shadow);
}

.badge {
    --bs-badge-border-radius: var(--bs-border-radius);
    font-weight: var(--custom-font-weight-medium);
}

/* Form controls */
.form-control,
.form-select {
    --bs-border-radius: var(--bs-border-radius);
    transition: border-color var(--custom-transition-duration) var(--custom-transition-timing),
        box-shadow var(--custom-transition-duration) var(--custom-transition-timing);
}

/* Alerts */
.alert {
    --bs-alert-border-radius: var(--bs-border-radius);
}