:root,
[data-bs-theme="light"] {
    /* CoolAI palette: change these tokens to recolour the complete application. */
    --color-brand-50: #e8f8f2;
    --color-brand-100: #cef1e4;
    --color-brand-200: #9fe2cc;
    --color-brand-500: #0aa174;
    --color-brand-600: #07875f;
    --color-brand-700: #066c4e;

    --color-primary: var(--color-brand-500);
    --color-primary-hover: var(--color-brand-600);
    --color-primary-active: var(--color-brand-700);
    --color-primary-soft: var(--color-brand-50);
    --color-primary-border: var(--color-brand-200);
    --color-on-primary: #ffffff;
    --color-on-primary-rgb: 255, 255, 255;

    --color-background: #f7f9f8;
    --color-surface: #ffffff;
    --color-surface-subtle: #f3f6f5;
    --color-surface-muted: #e9efed;
    --color-text: #101c24;
    --color-text-muted: #66747d;
    --color-text-subtle: #8b979e;
    --color-border: #e1e8e5;
    --color-border-strong: #c9d4d0;
    --color-surface-rgb: 255, 255, 255;
    --color-surface-subtle-rgb: 243, 246, 245;
    --color-text-rgb: 16, 28, 36;

    --color-sidebar-start: #052b2f;
    --color-sidebar-end: #021c20;
    --color-sidebar-text: #ffffff;
    --color-sidebar-muted: #bdcfcc;
    --color-sidebar-hover: rgba(255, 255, 255, .08);
    --color-sidebar-active: rgba(10, 161, 116, .30);
    --color-sidebar-border: rgba(255, 255, 255, .12);

    --color-info: #1684e8;
    --color-info-soft: #e9f4ff;
    --color-warning: #e9a70b;
    --color-warning-soft: #fff6dd;
    --color-success: #0b9968;
    --color-success-soft: #e8f7f1;
    --color-danger: #cf3f4f;
    --color-danger-soft: #fdecef;
    --color-neutral: #6f7b83;
    --color-neutral-soft: #eef1f2;

    --color-backdrop: rgba(5, 25, 29, .42);
    --color-overlay: rgba(2, 20, 23, .52);
    --color-white-overlay: rgba(255, 255, 255, .76);
    --color-white-border: rgba(255, 255, 255, .86);
    --color-shadow-rgb: 5, 38, 40;
    --shadow-sm: 0 .125rem .3rem rgba(var(--color-shadow-rgb), .08);
    --shadow-md: 0 .75rem 2rem rgba(var(--color-shadow-rgb), .10);
    --shadow-lg: 0 1.5rem 4rem rgba(var(--color-shadow-rgb), .16);

    /* Quote request status colours. */
    --quote-status-new: var(--color-info);
    --quote-status-new-l: var(--color-info-soft);
    --quote-status-pending: var(--color-neutral);
    --quote-status-pending-l: var(--color-neutral-soft);
    --quote-status-progress: var(--color-warning);
    --quote-status-progress-l: var(--color-warning-soft);
    --quote-status-quoted: var(--color-primary);
    --quote-status-quoted-l: var(--color-primary-soft);
    --quote-status-accepted: var(--color-success);
    --quote-status-accepted-l: var(--color-success-soft);
    --quote-status-rejected: var(--color-danger);
    --quote-status-rejected-l: var(--color-danger-soft);
    --quote-status-closed: var(--color-text-muted);
    --quote-status-closed-l: var(--color-surface-muted);

    /* Bootstrap bridge: existing components inherit the same palette. */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 10, 161, 116;
    --bs-primary-text-emphasis: var(--color-primary-active);
    --bs-primary-bg-subtle: var(--color-primary-soft);
    --bs-primary-border-subtle: var(--color-primary-border);
    --bs-secondary: var(--color-neutral);
    --bs-secondary-rgb: 111, 123, 131;
    --bs-success: var(--color-success);
    --bs-success-rgb: 11, 153, 104;
    --bs-success-text-emphasis: #075d41;
    --bs-success-bg-subtle: var(--color-success-soft);
    --bs-info: var(--color-info);
    --bs-info-rgb: 22, 132, 232;
    --bs-info-bg-subtle: var(--color-info-soft);
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 233, 167, 11;
    --bs-warning-bg-subtle: var(--color-warning-soft);
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 207, 63, 79;
    --bs-danger-bg-subtle: var(--color-danger-soft);
    --bs-body-color: var(--color-text);
    --bs-body-color-rgb: 16, 28, 36;
    --bs-body-bg: var(--color-background);
    --bs-body-bg-rgb: 247, 249, 248;
    --bs-secondary-color: var(--color-text-muted);
    --bs-secondary-bg: var(--color-surface-muted);
    --bs-tertiary-color: var(--color-text-subtle);
    --bs-tertiary-bg: var(--color-surface-subtle);
    --bs-emphasis-color: var(--color-text);
    --bs-emphasis-color-rgb: var(--color-text-rgb);
    --bs-light: var(--color-surface-subtle);
    --bs-light-rgb: var(--color-surface-subtle-rgb);
    --bs-dark: var(--color-text);
    --bs-dark-rgb: var(--color-text-rgb);
    --bs-white: var(--color-surface);
    --bs-white-rgb: var(--color-surface-rgb);
    --bs-border-color: var(--color-border);
    --bs-border-color-translucent: rgba(var(--color-shadow-rgb), .14);
    --bs-link-color: var(--color-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--color-primary-hover);
    --bs-link-hover-color-rgb: 7, 135, 95;
    --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .24);
    --bs-form-valid-color: var(--color-success);
    --bs-form-valid-border-color: var(--color-success);
    --bs-form-invalid-color: var(--color-danger);
    --bs-form-invalid-border-color: var(--color-danger);
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow-lg: var(--shadow-lg);
}

body {
    color: var(--color-text);
    background-color: var(--color-background);
}

.btn-primary,
.btn-success {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-primary-active);
    --bs-btn-active-border-color: var(--color-primary-active);
    --bs-btn-disabled-color: var(--color-on-primary);
    --bs-btn-disabled-bg: var(--color-primary);
    --bs-btn-disabled-border-color: var(--color-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-primary-active);
    --bs-btn-active-border-color: var(--color-primary-active);
}

.btn-secondary {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-neutral);
    --bs-btn-border-color: var(--color-neutral);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-text-muted);
    --bs-btn-hover-border-color: var(--color-text-muted);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-text);
    --bs-btn-active-border-color: var(--color-text);
}

.btn-danger {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 86%, var(--color-text));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 86%, var(--color-text));
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 76%, var(--color-text));
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-danger) 76%, var(--color-text));
}

.btn-light {
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-surface);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-surface-muted);
    --bs-btn-hover-border-color: var(--color-border);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-bg: var(--color-border);
    --bs-btn-active-border-color: var(--color-border);
}

.form-control,
.form-select,
.input-group-text,
.card,
.modal-content,
.dropdown-menu,
.list-group-item {
    --bs-body-bg: var(--color-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-primary-border);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .14);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-link.active,
.active > .page-link {
    color: var(--color-on-primary);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Shared sub-navigation used by both Admin and Account pages. */
.nav-pills {
    --bs-nav-link-color: var(--color-primary);
    --bs-nav-link-hover-color: var(--color-primary-hover);
    --bs-nav-pills-link-active-color: var(--color-on-primary);
    --bs-nav-pills-link-active-bg: var(--color-primary);
}

.nav-pills .nav-link:hover:not(.active) {
    color: var(--color-primary-hover);
    background-color: var(--color-primary-soft);
}

.nav-pills .nav-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .18);
}