/* ==========================================================================
   BlockSuite base: design tokens and shared pieces.

   Every color comes from the theme's --theme-* tokens when the theme
   provides them (e.g. Vitrine), falling back to the browser's system colors
   so blocks also suit light and dark themes that define no tokens.
   Override any --bst-* token in your theme to restyle all blocks.
   ========================================================================== */

:where(.bst-block) {
    --bst-surface: var(--theme-surface, Canvas);
    --bst-surface-alt: var(--theme-surface-alt, color-mix(in srgb, CanvasText 6%, Canvas));
    --bst-text: var(--theme-text, CanvasText);
    --bst-text-muted: var(--theme-text-muted, color-mix(in srgb, CanvasText 72%, Canvas));
    --bst-accent-text: var(--theme-primary-text, var(--bst-text));
    --bst-border: var(--theme-border, color-mix(in srgb, CanvasText 20%, Canvas));
    --bst-border-strong: var(--theme-border-strong, color-mix(in srgb, CanvasText 55%, Canvas));
    --bst-accent: var(--theme-primary, LinkText);
    --bst-on-accent: var(--theme-on-primary, Canvas);
    --bst-dark: var(--theme-dark, #1b1f24);
    --bst-on-dark: var(--theme-on-dark, #fff);
    --bst-link: var(--theme-link, LinkText);
    --bst-radius: var(--theme-radius, 8px);
    --bst-gap: 1.5rem;
    --bst-touch: 2.75rem;
}

.bst-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Buttons. Hover adds an underline rather than changing colors, so text
   contrast never drops whatever the theme's colors are. */
.bst-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: var(--bst-touch);
    padding: 0.5em 1.15em;
    border: 2px solid var(--bst-accent);
    border-radius: var(--theme-radius-button, var(--bst-radius));
    background: var(--bst-accent);
    color: var(--bst-on-accent);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.bst-button:hover { color: var(--bst-on-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.bst-button--secondary { background: var(--bst-surface-alt); border-color: var(--bst-border); color: var(--bst-text); }
.bst-button--secondary:hover { color: var(--bst-text); }
.bst-button--outline { background: transparent; border-color: currentColor; color: var(--bst-link); }
.bst-button--outline:hover { color: var(--bst-link); }
.bst-button--small { min-height: 2.25rem; padding: 0.3em 0.85em; font-size: 0.9em; }

.bst-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; }

/* Without JavaScript, panels that would be collapsed stay open. */
html:not(.bst-js) .bst-accordion__panel[hidden],
html:not(.bst-js) .bst-tabs-block__panel[hidden] {
    display: block !important;
    content-visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
    .bst-block, .bst-block * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
    .bst-button { border: 2px solid ButtonText; }
}