/* Bootstrap 5.3 wears the design tokens. Pages keep using btn, card, alert, badge, form-control, table;
   this file makes them look right in light and dark. Only tokens here, no raw colours. */

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-font-family: var(--ap-font-body);
    --bs-body-font-size: var(--ap-text-base);
    --bs-body-line-height: var(--ap-leading);
    --bs-body-color: var(--ap-ink);
    --bs-body-color-rgb: var(--ap-ink-rgb);
    --bs-body-bg: var(--ap-bg);
    --bs-emphasis-color: var(--ap-ink);
    --bs-emphasis-color-rgb: var(--ap-ink-rgb);
    --bs-heading-color: var(--ap-ink);
    --bs-secondary-color: var(--ap-ink-muted);
    --bs-secondary-bg: var(--ap-surface-sunken);
    --bs-tertiary-color: var(--ap-ink-subtle);
    --bs-tertiary-bg: var(--ap-surface-2);

    --bs-link-color: var(--ap-accent);
    --bs-link-color-rgb: var(--ap-accent-rgb);
    --bs-link-hover-color: var(--ap-accent-hover);
    --bs-link-hover-color-rgb: var(--ap-accent-rgb);
    --bs-link-decoration: none;

    --bs-border-color: var(--ap-line);
    --bs-border-color-translucent: var(--ap-line);
    --bs-border-radius: var(--ap-radius-sm);
    --bs-border-radius-sm: var(--ap-radius-xs);
    --bs-border-radius-lg: var(--ap-radius);
    --bs-border-radius-xl: var(--ap-radius-lg);
    --bs-border-radius-xxl: var(--ap-radius-lg);
    --bs-border-radius-pill: var(--ap-radius-pill);
    --bs-box-shadow: var(--ap-shadow-2);
    --bs-box-shadow-sm: var(--ap-shadow-1);
    --bs-box-shadow-lg: var(--ap-shadow-3);
    --bs-focus-ring-color: var(--ap-focus);
    --bs-highlight-bg: var(--ap-accent-soft);
    --bs-code-color: var(--ap-accent);

    --bs-primary: var(--ap-accent);
    --bs-primary-rgb: var(--ap-accent-rgb);
    --bs-primary-text-emphasis: var(--ap-accent);
    --bs-primary-bg-subtle: var(--ap-accent-soft);
    --bs-primary-border-subtle: var(--ap-accent-line);

    --bs-secondary: var(--ap-ink-muted);
    --bs-secondary-text-emphasis: var(--ap-ink-muted);
    --bs-secondary-bg-subtle: var(--ap-surface-2);
    --bs-secondary-border-subtle: var(--ap-line-strong);

    --bs-success: var(--ap-success);
    --bs-success-rgb: var(--ap-success-rgb);
    --bs-success-text-emphasis: var(--ap-success);
    --bs-success-bg-subtle: var(--ap-success-soft);
    --bs-success-border-subtle: var(--ap-success-line);

    --bs-warning: var(--ap-warning);
    --bs-warning-rgb: var(--ap-warning-rgb);
    --bs-warning-text-emphasis: var(--ap-warning);
    --bs-warning-bg-subtle: var(--ap-warning-soft);
    --bs-warning-border-subtle: var(--ap-warning-line);

    --bs-danger: var(--ap-danger);
    --bs-danger-rgb: var(--ap-danger-rgb);
    --bs-danger-text-emphasis: var(--ap-danger);
    --bs-danger-bg-subtle: var(--ap-danger-soft);
    --bs-danger-border-subtle: var(--ap-danger-line);

    --bs-info: var(--ap-info);
    --bs-info-rgb: var(--ap-info-rgb);
    --bs-info-text-emphasis: var(--ap-info);
    --bs-info-bg-subtle: var(--ap-info-soft);
    --bs-info-border-subtle: var(--ap-info-line);

    --bs-light-text-emphasis: var(--ap-ink);
    --bs-light-bg-subtle: var(--ap-surface-2);
    --bs-light-border-subtle: var(--ap-line);
    --bs-dark-text-emphasis: var(--ap-ink);
    --bs-dark-bg-subtle: var(--ap-surface-sunken);
    --bs-dark-border-subtle: var(--ap-line-strong);

    --bs-form-valid-color: var(--ap-success);
    --bs-form-valid-border-color: var(--ap-success);
    --bs-form-invalid-color: var(--ap-danger);
    --bs-form-invalid-border-color: var(--ap-danger);
}

/* ---------- Buttons: pills. Primary = ink fill (the reference's "Contact us"), accent for outline-primary. ---------- */
.btn {
    --bs-btn-font-family: var(--ap-font-heading);
    --bs-btn-font-weight: var(--ap-weight-strong);
    --bs-btn-font-size: var(--ap-text-sm);
    --bs-btn-padding-x: 1.05rem;
    --bs-btn-padding-y: .45rem;
    --bs-btn-border-radius: var(--ap-radius-pill);
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--ap-focus);
    letter-spacing: .005em;
    transition: transform var(--ap-dur) var(--ap-ease), background-color var(--ap-dur-fast) var(--ap-ease),
                border-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease),
                box-shadow var(--ap-dur-fast) var(--ap-ease);
}
.btn-sm { --bs-btn-padding-x: .8rem; --bs-btn-padding-y: .28rem; --bs-btn-font-size: var(--ap-text-xs); --bs-btn-border-radius: var(--ap-radius-pill); }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .65rem; --bs-btn-font-size: var(--ap-text-base); --bs-btn-border-radius: var(--ap-radius-pill); }

.btn-primary, .btn-dark {
    --bs-btn-color: var(--ap-ink-inverse);
    --bs-btn-bg: var(--ap-ink);
    --bs-btn-border-color: var(--ap-ink);
    --bs-btn-hover-color: var(--ap-ink-inverse);
    --bs-btn-hover-bg: var(--ap-accent-hover);
    --bs-btn-hover-border-color: var(--ap-accent-hover);
    --bs-btn-active-color: var(--ap-ink-inverse);
    --bs-btn-active-bg: var(--ap-accent);
    --bs-btn-active-border-color: var(--ap-accent);
    --bs-btn-disabled-color: var(--ap-ink-inverse);
    --bs-btn-disabled-bg: var(--ap-ink-subtle);
    --bs-btn-disabled-border-color: var(--ap-ink-subtle);
}
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn-dark {
    --bs-btn-hover-color: var(--ap-accent-ink);
    --bs-btn-active-color: var(--ap-accent-ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--ap-accent);
    --bs-btn-border-color: var(--ap-accent-line);
    --bs-btn-hover-color: var(--ap-accent-ink);
    --bs-btn-hover-bg: var(--ap-accent);
    --bs-btn-hover-border-color: var(--ap-accent);
    --bs-btn-active-color: var(--ap-accent-ink);
    --bs-btn-active-bg: var(--ap-accent-hover);
    --bs-btn-active-border-color: var(--ap-accent-hover);
    --bs-btn-disabled-color: var(--ap-ink-subtle);
    --bs-btn-disabled-border-color: var(--ap-line);
}

.btn-secondary, .btn-light {
    --bs-btn-color: var(--ap-ink);
    --bs-btn-bg: var(--ap-surface-sunken);
    --bs-btn-border-color: var(--ap-surface-sunken);
    --bs-btn-hover-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-line-strong);
    --bs-btn-hover-border-color: var(--ap-line-strong);
    --bs-btn-active-color: var(--ap-ink);
    --bs-btn-active-bg: var(--ap-line-strong);
    --bs-btn-active-border-color: var(--ap-line-strong);
    --bs-btn-disabled-color: var(--ap-ink-subtle);
    --bs-btn-disabled-bg: var(--ap-surface-2);
    --bs-btn-disabled-border-color: var(--ap-surface-2);
}

.btn-outline-secondary, .btn-outline-dark, .btn-outline-light {
    --bs-btn-color: var(--ap-ink);
    --bs-btn-border-color: var(--ap-line-strong);
    --bs-btn-hover-color: var(--ap-ink);
    --bs-btn-hover-bg: var(--ap-surface-2);
    --bs-btn-hover-border-color: var(--ap-ink-subtle);
    --bs-btn-active-color: var(--ap-ink);
    --bs-btn-active-bg: var(--ap-surface-sunken);
    --bs-btn-active-border-color: var(--ap-ink-subtle);
    --bs-btn-disabled-color: var(--ap-ink-subtle);
    --bs-btn-disabled-border-color: var(--ap-line);
}

.btn-success, .btn-danger, .btn-info, .btn-warning {
    --bs-btn-color: var(--ap-surface);
    --bs-btn-hover-color: var(--ap-surface);
    --bs-btn-active-color: var(--ap-surface);
    --bs-btn-disabled-color: var(--ap-surface);
}
.btn-success { --bs-btn-bg: var(--ap-success); --bs-btn-border-color: var(--ap-success); --bs-btn-hover-bg: var(--ap-success); --bs-btn-hover-border-color: var(--ap-success); --bs-btn-active-bg: var(--ap-success); --bs-btn-active-border-color: var(--ap-success); --bs-btn-disabled-bg: var(--ap-success); --bs-btn-disabled-border-color: var(--ap-success); }
.btn-danger  { --bs-btn-bg: var(--ap-danger);  --bs-btn-border-color: var(--ap-danger);  --bs-btn-hover-bg: var(--ap-danger);  --bs-btn-hover-border-color: var(--ap-danger);  --bs-btn-active-bg: var(--ap-danger);  --bs-btn-active-border-color: var(--ap-danger);  --bs-btn-disabled-bg: var(--ap-danger);  --bs-btn-disabled-border-color: var(--ap-danger); }
.btn-info    { --bs-btn-bg: var(--ap-info);    --bs-btn-border-color: var(--ap-info);    --bs-btn-hover-bg: var(--ap-info);    --bs-btn-hover-border-color: var(--ap-info);    --bs-btn-active-bg: var(--ap-info);    --bs-btn-active-border-color: var(--ap-info);    --bs-btn-disabled-bg: var(--ap-info);    --bs-btn-disabled-border-color: var(--ap-info); }
/* Warning keeps dark text on the yellow fill in both modes. */
.btn-warning { --bs-btn-color: var(--ap-ink-inverse); --bs-btn-bg: var(--ap-warning-fill); --bs-btn-border-color: var(--ap-warning-fill); --bs-btn-hover-color: var(--ap-ink-inverse); --bs-btn-hover-bg: var(--ap-warning-fill); --bs-btn-hover-border-color: var(--ap-warning-fill); --bs-btn-active-color: var(--ap-ink-inverse); --bs-btn-active-bg: var(--ap-warning-fill); --bs-btn-active-border-color: var(--ap-warning-fill); }
:root:not([data-theme="dark"]) .btn-warning { --bs-btn-color: var(--ap-ink); --bs-btn-hover-color: var(--ap-ink); --bs-btn-active-color: var(--ap-ink); }
.btn-success:hover, .btn-danger:hover, .btn-info:hover, .btn-warning:hover { filter: brightness(1.08); }

.btn-outline-success, .btn-outline-danger, .btn-outline-info, .btn-outline-warning {
    --bs-btn-hover-color: var(--ap-surface);
    --bs-btn-active-color: var(--ap-surface);
    --bs-btn-disabled-color: var(--ap-ink-subtle);
    --bs-btn-disabled-border-color: var(--ap-line);
}
.btn-outline-success { --bs-btn-color: var(--ap-success); --bs-btn-border-color: var(--ap-success-line); --bs-btn-hover-bg: var(--ap-success); --bs-btn-hover-border-color: var(--ap-success); --bs-btn-active-bg: var(--ap-success); --bs-btn-active-border-color: var(--ap-success); }
.btn-outline-danger  { --bs-btn-color: var(--ap-danger);  --bs-btn-border-color: var(--ap-danger-line);  --bs-btn-hover-bg: var(--ap-danger);  --bs-btn-hover-border-color: var(--ap-danger);  --bs-btn-active-bg: var(--ap-danger);  --bs-btn-active-border-color: var(--ap-danger); }
.btn-outline-info    { --bs-btn-color: var(--ap-info);    --bs-btn-border-color: var(--ap-info-line);    --bs-btn-hover-bg: var(--ap-info);    --bs-btn-hover-border-color: var(--ap-info);    --bs-btn-active-bg: var(--ap-info);    --bs-btn-active-border-color: var(--ap-info); }
.btn-outline-warning { --bs-btn-color: var(--ap-warning); --bs-btn-border-color: var(--ap-warning-line); --bs-btn-hover-bg: var(--ap-warning-fill); --bs-btn-hover-border-color: var(--ap-warning-fill); --bs-btn-hover-color: var(--ap-ink-inverse); --bs-btn-active-bg: var(--ap-warning-fill); --bs-btn-active-border-color: var(--ap-warning-fill); --bs-btn-active-color: var(--ap-ink-inverse); }
:root:not([data-theme="dark"]) .btn-outline-warning { --bs-btn-hover-color: var(--ap-ink); --bs-btn-active-color: var(--ap-ink); }

.btn-link {
    --bs-btn-color: var(--ap-accent);
    --bs-btn-hover-color: var(--ap-accent-hover);
    --bs-btn-active-color: var(--ap-accent-hover);
    --bs-btn-font-family: var(--ap-font-body);
    --bs-btn-font-weight: 500;
    text-decoration: none;
}

/* ---------- Cards ---------- */
.card {
    --bs-card-bg: var(--ap-surface);
    --bs-card-border-color: var(--ap-line);
    --bs-card-border-radius: var(--ap-radius);
    --bs-card-inner-border-radius: calc(var(--ap-radius) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-padding-y: .85rem;
    --bs-card-cap-padding-x: 1.1rem;
    --bs-card-spacer-x: 1.1rem;
    --bs-card-spacer-y: 1rem;
    box-shadow: var(--ap-shadow-1);
}
.card-header {
    font-family: var(--ap-font-heading);
    font-weight: var(--ap-weight-strong);
    border-bottom-color: var(--ap-line);
}
.card-footer { border-top-color: var(--ap-line); }

/* ---------- Alerts: soft fill, coloured edge ---------- */
.alert {
    --bs-alert-border-radius: var(--ap-radius);
    border-left-width: 4px;
}
.alert-primary   { border-left-color: var(--ap-accent); }
.alert-success   { border-left-color: var(--ap-success); }
.alert-warning   { border-left-color: var(--ap-warning-fill); }
.alert-danger    { border-left-color: var(--ap-danger); }
.alert-info      { border-left-color: var(--ap-info); }
.alert-secondary, .alert-light { --bs-alert-color: var(--ap-ink); --bs-alert-bg: var(--ap-surface-2); --bs-alert-border-color: var(--ap-line); border-left-color: var(--ap-ink-subtle); }
.alert .alert-link { color: inherit; text-decoration: underline; }

/* ---------- Badges: soft pills with readable text in both modes ---------- */
.badge {
    --bs-badge-font-weight: var(--ap-weight-strong);
    --bs-badge-border-radius: var(--ap-radius-pill);
    --bs-badge-padding-x: .6em;
    --bs-badge-padding-y: .38em;
    letter-spacing: .01em;
    border: 1px solid transparent;
}
.badge.bg-primary, .badge.text-bg-primary { background: var(--ap-accent-soft) !important; color: var(--ap-accent) !important; border-color: var(--ap-accent-line); }
.badge.bg-secondary, .badge.text-bg-secondary { background: var(--ap-surface-sunken) !important; color: var(--ap-ink-muted) !important; border-color: var(--ap-line-strong); }
.badge.bg-success, .badge.text-bg-success { background: var(--ap-success-soft) !important; color: var(--ap-success) !important; border-color: var(--ap-success-line); }
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning-subtle { background: var(--ap-warning-soft) !important; color: var(--ap-warning) !important; border-color: var(--ap-warning-line); }
.badge.bg-danger, .badge.text-bg-danger { background: var(--ap-danger-soft) !important; color: var(--ap-danger) !important; border-color: var(--ap-danger-line); }
.badge.bg-info, .badge.text-bg-info { background: var(--ap-info-soft) !important; color: var(--ap-info) !important; border-color: var(--ap-info-line); }
.badge.bg-light, .badge.text-bg-light { background: var(--ap-surface-2) !important; color: var(--ap-ink) !important; border-color: var(--ap-line-strong) !important; }
.badge.bg-light.text-muted { color: var(--ap-ink-muted) !important; }
.badge.bg-dark, .badge.text-bg-dark { background: var(--ap-ink) !important; color: var(--ap-ink-inverse) !important; }

/* Non-badge light/white fills follow the surfaces so they do not become white boxes in dark mode. */
.bg-light { background-color: var(--ap-surface-2) !important; }
.bg-white { background-color: var(--ap-surface) !important; }
.bg-body { background-color: var(--ap-bg) !important; }
.text-dark:not(.badge) { color: var(--ap-ink) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--ap-surface);
    border-color: var(--ap-line-strong);
    border-radius: var(--ap-radius-sm);
    color: var(--ap-ink);
    transition: border-color var(--ap-dur-fast) var(--ap-ease), box-shadow var(--ap-dur-fast) var(--ap-ease);
}
.form-control::placeholder { color: var(--ap-ink-subtle); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ap-accent);
    box-shadow: 0 0 0 .2rem var(--ap-focus);
}
.form-control:disabled, .form-select:disabled { background-color: var(--ap-surface-2); color: var(--ap-ink-subtle); }
.form-label { font-weight: 500; font-size: var(--ap-text-sm); color: var(--ap-ink-muted); margin-bottom: .3rem; }
.form-text { color: var(--ap-ink-subtle); }
.form-check-input { background-color: var(--ap-surface); border-color: var(--ap-line-strong); }
.form-check-input:checked { background-color: var(--ap-accent); border-color: var(--ap-accent); }
.input-group-text { background-color: var(--ap-surface-2); border-color: var(--ap-line-strong); color: var(--ap-ink-muted); }
.form-floating > label { color: var(--ap-ink-muted); }
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after { background-color: transparent; }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ap-ink);
    --bs-table-border-color: var(--ap-line);
    --bs-table-striped-bg: var(--ap-surface-2);
    --bs-table-striped-color: var(--ap-ink);
    --bs-table-hover-bg: var(--ap-accent-soft);
    --bs-table-hover-color: var(--ap-ink);
    --bs-table-active-bg: var(--ap-accent-soft);
}
.table > thead th, .table-light {
    --bs-table-bg: var(--ap-surface-2);
    --bs-table-color: var(--ap-ink-muted);
    --bs-table-border-color: var(--ap-line);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-strong);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.table-warning { --bs-table-bg: var(--ap-warning-soft); --bs-table-color: var(--ap-ink); --bs-table-border-color: var(--ap-warning-line); }

/* ---------- Navigation, menus, modal, list group, pagination ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--ap-line); --bs-nav-tabs-link-active-bg: var(--ap-surface); --bs-nav-tabs-link-active-border-color: var(--ap-line) var(--ap-line) var(--ap-surface); --bs-nav-tabs-link-hover-border-color: transparent; }
.nav-link { --bs-nav-link-color: var(--ap-ink-muted); --bs-nav-link-hover-color: var(--ap-ink); }
.nav-tabs .nav-link.active { color: var(--ap-ink); font-weight: var(--ap-weight-strong); }
.nav-pills { --bs-nav-pills-border-radius: var(--ap-radius-pill); --bs-nav-pills-link-active-bg: var(--ap-ink); --bs-nav-pills-link-active-color: var(--ap-ink-inverse); }
.dropdown-menu { --bs-dropdown-bg: var(--ap-surface); --bs-dropdown-border-color: var(--ap-line); --bs-dropdown-border-radius: var(--ap-radius); --bs-dropdown-box-shadow: var(--ap-shadow-3); --bs-dropdown-link-hover-bg: var(--ap-surface-2); --bs-dropdown-link-active-bg: var(--ap-accent-soft); --bs-dropdown-link-active-color: var(--ap-ink); box-shadow: var(--ap-shadow-3); }
.modal { --bs-modal-bg: var(--ap-surface); --bs-modal-border-color: var(--ap-line); --bs-modal-border-radius: var(--ap-radius-lg); --bs-modal-box-shadow: var(--ap-shadow-3); --bs-modal-header-border-color: var(--ap-line); --bs-modal-footer-border-color: var(--ap-line); }
.modal-backdrop { --bs-backdrop-bg: rgb(var(--ap-overlay)); --bs-backdrop-opacity: .45; }
.list-group { --bs-list-group-bg: var(--ap-surface); --bs-list-group-border-color: var(--ap-line); --bs-list-group-border-radius: var(--ap-radius); --bs-list-group-action-hover-bg: var(--ap-surface-2); --bs-list-group-action-active-bg: var(--ap-accent-soft); --bs-list-group-active-bg: var(--ap-accent); --bs-list-group-active-border-color: var(--ap-accent); --bs-list-group-active-color: var(--ap-accent-ink); }
.pagination { --bs-pagination-bg: var(--ap-surface); --bs-pagination-border-color: var(--ap-line); --bs-pagination-hover-bg: var(--ap-surface-2); --bs-pagination-hover-border-color: var(--ap-line); --bs-pagination-active-bg: var(--ap-ink); --bs-pagination-active-border-color: var(--ap-ink); --bs-pagination-active-color: var(--ap-ink-inverse); --bs-pagination-color: var(--ap-ink); }
.progress { --bs-progress-bg: var(--ap-surface-sunken); --bs-progress-border-radius: var(--ap-radius-pill); --bs-progress-bar-bg: var(--ap-accent); }
.accordion { --bs-accordion-bg: var(--ap-surface); --bs-accordion-border-color: var(--ap-line); --bs-accordion-border-radius: var(--ap-radius); --bs-accordion-active-bg: var(--ap-accent-soft); --bs-accordion-active-color: var(--ap-ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--ap-focus); }
.tooltip { --bs-tooltip-bg: var(--ap-ink); --bs-tooltip-color: var(--ap-ink-inverse); --bs-tooltip-border-radius: var(--ap-radius-xs); }
.btn-close { filter: none; }
:root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }