/*
 * MyStudio core modules: design tokens.
 *
 * Module CSS and JS use these --ms-* variables instead of any one theme's names.
 * Each resolves to the MyStudio Default theme's variable when present, then to
 * Bootstrap 5's, then to a plain fallback — so the modules match MyStudio Default
 * exactly and still look right in any other Bootstrap theme. A theme can also set
 * the --ms-* variables directly to restyle every core module at once.
 */
:root {
    --ms-accent: var(--tekbb-accent, var(--bs-primary, #0d9488));
    --ms-accent-subtle: var(--tekbb-accent-subtle, var(--bs-primary-bg-subtle, rgba(13, 148, 136, .1)));
    --ms-heading-bg: var(--tekbb-heading-bg, var(--bs-primary, #0d9488));
    --ms-surface: var(--tekbb-surface, var(--bs-tertiary-bg, #f8f9fa));
    --ms-border: var(--tekbb-border, var(--bs-border-color, #dee2e6));
    --ms-muted: var(--tekbb-muted, var(--bs-secondary-color, #6c757d));
    --ms-text: var(--tekbb-text, var(--bs-body-color, #212529));
    --ms-text-inv: var(--tekbb-text-inv, #ffffff);
    --ms-glass-bg: var(--glass-bg, var(--bs-body-bg, #ffffff));
    --ms-glass-bg-heavy: var(--glass-bg-heavy, var(--bs-body-bg, #ffffff));
    --ms-glass-border: var(--glass-border, var(--bs-border-color, rgba(0, 0, 0, .1)));
    /* Editing areas (the post editor): the page background tinted with the theme colour; a theme can set
       --tekbb-editor-bg / --tekbb-editor-text instead */
    --ms-editor-bg: var(--tekbb-editor-bg, color-mix(in srgb, var(--ms-accent) 5%, var(--bs-body-bg, #ffffff)));
    --ms-editor-text: var(--tekbb-editor-text, var(--bs-body-color, #212529));
}

/* The MyStudio logo as an icon: class="bi mystudio" (icon choosers offer it next to Bootstrap Icons) */
.bi.mystudio { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: url(mystudio-logo.svg) center / contain no-repeat; }
.bi.mystudio::before { content: none; }

/* Bootstrap's own pagination (ul.pagination > li.page-item > .page-link, e.g. the portal feed) in the theme's accent
   instead of Bootstrap blue; MyBB's page links (div.pagination > a) are styled by each theme */
.pagination {
    --bs-pagination-color: var(--ms-accent);
    --bs-pagination-bg: var(--ms-surface);
    --bs-pagination-border-color: var(--ms-border);
    --bs-pagination-hover-color: var(--ms-accent);
    --bs-pagination-hover-bg: var(--ms-accent-subtle);
    --bs-pagination-hover-border-color: var(--ms-border);
    --bs-pagination-focus-color: var(--ms-accent);
    --bs-pagination-focus-bg: var(--ms-accent-subtle);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--ms-accent-subtle);
    --bs-pagination-active-color: var(--ms-text-inv);
    --bs-pagination-active-bg: var(--ms-accent);
    --bs-pagination-active-border-color: var(--ms-accent);
    --bs-pagination-disabled-color: var(--ms-muted);
    --bs-pagination-disabled-bg: var(--ms-surface);
    --bs-pagination-disabled-border-color: var(--ms-border);
}