/*
 * 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; }