/* theme-bridge.css — maps Bootstrap 5.3's CSS variables onto the design tokens
   in tokens.css, so Bootstrap's own components (buttons, cards, tables, forms,
   nav-tabs, modals, dropdowns) adopt the mockup look without restyling each by
   hand. Load this AFTER Bootstrap and after the app stylesheets so it wins.

   This is the standardisation layer: change a value in tokens.css and it flows
   here. Component-specific polish that Bootstrap variables cannot reach is kept
   to the short overrides at the bottom. */

:root {
    /* Core surfaces + type */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--q-font);
    --bs-emphasis-color: var(--text);
    --bs-heading-color: var(--text);
    --bs-secondary-color: var(--text-dim);
    --bs-tertiary-color: var(--text-faint);
    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-2);

    /* Borders + radii */
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--r);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r);
    --bs-border-radius-xl: var(--r);
    --bs-border-radius-pill: var(--r-pill);

    /* Accent + links */
    --bs-primary: var(--accent);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-link-color: var(--accent);
    --bs-link-color-rgb: var(--accent-rgb);
    --bs-link-hover-color: var(--accent);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--q-font);
}

/* Primary buttons -> accent (BS 5.3 buttons read per-variant --bs-btn-* vars) */
.btn-primary {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-ink);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(1.05); }

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

/* Cards */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: var(--surface);
    box-shadow: var(--shadow);
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--surface-2);
    --bs-table-hover-color: var(--text);
}
.table > thead th {
    color: var(--text-faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: var(--step--1);
}

/* Nav tabs -> accent underline, mockup style */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--border);
    border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
    color: var(--text-dim);
    font-weight: 600;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--text); border-color: transparent; border-bottom-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--text);
    background: transparent;
    border-bottom-color: var(--accent);
}

/* Form controls -> token borders + accent focus ring */
.form-control, .form-select {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 28%, transparent);
}

/* Surfaces Bootstrap paints from its own theme vars */
.modal { --bs-modal-bg: var(--surface); --bs-modal-border-color: var(--border); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-border-color: var(--border); --bs-dropdown-link-hover-bg: var(--surface-2); }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- Legacy token remap ------------------------------------------------
   The editor is built on the --color-* set (100+ uses) and was a dark teal
   theme (--color-text was white). Point those names at the mockup tokens so
   the whole UI adopts the theme in one move. This loads after stylesNew.css,
   so it wins over that file's :root. Individual rules get migrated onto the
   tokens above over time; until then this keeps everything coherent and
   theme-aware (the tokens already switch with data-bs-theme). */
:root {
    --color-background: var(--bg);
    /* The legacy --color-primary is used as a border/outline colour in ~20
       structural rules as well as for fills. Point it at the calm muted mint so
       those outlines stop dazzling in dark; the fluorescent --accent stays
       reserved for real pops (active tab, primary buttons, focus). */
    --color-primary:    var(--accent-muted);
    --color-secondary:  var(--text-dim);
    --color-yellow:     var(--accent);
    --color-text:       var(--text);
    --color-light:      var(--surface-2);
    --color-lighter:    var(--border);
    --color-white:      var(--surface);
    --color-shadow:     rgba(20, 40, 32, .10);
    --font-family-primary: var(--q-font);
}

/* Links were white for the old dark ground; make them the accent. */
a { color: var(--accent); }
a:hover { color: var(--accent); filter: brightness(1.1); }

/* Controls filled with the accent need light text (the old --color-text was
   white, now dark), so restore readable text on accent fills. */
.btn-info,
.btn-primary,
.btn-outline-primary:hover { color: var(--accent-ink) !important; }

/* The 5px yellow strip at the top of <body> becomes a thin accent line. */
body { border-top-color: var(--accent) !important; }