/* Map tokens onto the document + Bootstrap variables */
:root {
    /* Bootstrap variable overrides (works because Bootstrap uses CSS vars in v5+) */
    --bs-body-bg: var(--fme-bg);
    --bs-body-color: var(--fme-text);
    --bs-border-color: var(--fme-border);
    --bs-primary: var(--fme-brand);
    --bs-link-color: var(--fme-brand);
    --bs-link-hover-color: var(--fme-brand-strong);
    --bs-success: var(--fme-success);
    --bs-warning: var(--fme-warning);
    --bs-danger: var(--fme-danger);
    --bs-info: var(--fme-info);
    --bs-font-sans-serif: var(--fme-font-sans);
}

/* Global base */
html, body {
    font-family: var(--fme-font-sans);
    background: var(--fme-bg);
    color: var(--fme-text);
    line-height: var(--fme-leading-normal);
}

/* Surfaces */
.fme-surface {
    background: var(--fme-surface-1);
    border: 1px solid var(--fme-border);
    border-radius: var(--fme-radius-md);
    box-shadow: var(--fme-shadow-sm);
}

/* Typography helpers (optional) */
.fme-h1 {
    font-size: var(--fme-h1);
    line-height: var(--fme-leading-tight);
    font-weight: var(--fme-weight-semibold);
}

.fme-h2 {
    font-size: var(--fme-h2);
    line-height: var(--fme-leading-tight);
    font-weight: var(--fme-weight-semibold);
}

.fme-h3 {
    font-size: var(--fme-h3);
    line-height: var(--fme-leading-tight);
    font-weight: var(--fme-weight-semibold);
}

.fme-muted {
    color: var(--fme-text-muted);
}

.fme-faint {
    color: var(--fme-text-faint);
}

/* Focus ring (consistent + accessible) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: var(--fme-focus-width) solid var(--fme-focus-color);
    outline-offset: var(--fme-focus-offset);
}

/* Buttons: keep Bootstrap structure, adjust feel */
.btn {
    border-radius: var(--fme-radius-sm);
}

/* Form controls */
.form-control, .form-select, .form-check-input {
    background-color: color-mix(in oklab, var(--fme-surface-1) 92%, black 8%);
    color: var(--fme-text);
    border-color: var(--fme-border);
}

    .form-control::placeholder {
        color: var(--fme-text-faint);
    }

/* Tables: density via data-density */
:root[data-density="comfortable"] {
    --fme-table-y: 10px;
    --fme-table-x: 12px;
    --fme-table-font: var(--fme-text-sm);
}

:root[data-density="compact"] {
    --fme-table-y: 6px;
    --fme-table-x: 10px;
    --fme-table-font: var(--fme-text-sm);
}

.table > :not(caption) > * > * {
    padding: var(--fme-table-y) var(--fme-table-x);
    font-size: var(--fme-table-font);
}

/* “Card header / section header” utility */
.fme-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fme-space-4);
    padding: var(--fme-space-4);
    border-bottom: 1px solid var(--fme-border);
}