/*
 * Admin panel design language for public surfaces.
 *
 * The structure follows the custom properties at the top of
 * oc-admin/themes/modern/css/main.css (4/6px radii, bench/chrome greys,
 * hairline rules, overlay shadows), but the accent comes from the public
 * theme. --osc-bronze is aliased to --accent, so changing the site accent
 * immediately recolours the category band, filter panel and breadcrumb.
 */

.home-cat-band,
.reader-tools,
.reader-tools-sheet,
.results-filterbar,
.results-sort,
.results-tools,
.alert-pop,
.crumbs-band,
.glance-dd-panel,
#glance-category-sheet {
    --osc-bronze: var(--accent);
    --osc-bronze-deep: var(--accent-hover);
    --osc-bronze-tint: var(--accent-tint);
    --osc-accent-brand: var(--accent);
    --osc-navy: light-dark(#0f2742, #e6ebf2);
    --osc-bench: light-dark(#fff, #1a1f27);
    --osc-bench-warm: light-dark(#f7f9fb, #232a35);
    --osc-bench-sunk: light-dark(#eef1f5, #14181f);
    --osc-chrome: light-dark(#e4e9ef, #262d39);
    --osc-chrome-edge: light-dark(#cfd6df, #3a424f);
    --osc-chrome-hover: light-dark(rgb(15 24 40 / 0.07), rgb(255 255 255 / 0.06));
    --osc-nav-label: light-dark(#576371, #a6b0be);
    --osc-rule: light-dark(#dde3ea, #333a45);
    --osc-rule-strong: light-dark(#7e8998, #79828f);
    --osc-ink: light-dark(#14181f, #e6ebf2);
    --osc-ink-muted: light-dark(#5f6b7a, #a6b0be);
    --osc-ink-emphasis: light-dark(#46505d, #c6cdd8);
    --osc-ink-inverse: var(--accent-ink);
    --osc-success: light-dark(#1d7d3e, #5cc27d);
    --osc-success-tint: light-dark(#e4f8e7, #183024);
    --osc-danger: light-dark(#c22826, #f0857f);
    --osc-danger-tint: light-dark(#ffe9e5, #331d1b);
    --osc-warning: light-dark(#ddbc28, #e8c14a);
    --osc-warning-tint: light-dark(#fdf4d2, #2e2812);
    --osc-info: light-dark(#006c9c, #5bb6e8);
    --osc-info-tint: light-dark(#e6f3fb, #152833);
    --osc-shadow-soft: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.45));
    --osc-shadow-tight: light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.35));
    --osc-shadow-overlay: 0 4px 12px var(--osc-shadow-soft), 0 1px 3px var(--osc-shadow-tight);
    --osc-shadow-modal: 0 16px 48px rgb(0 0 0 / 0.18);
    --osc-radius: 6px;
    --osc-radius-sm: 4px;
    --osc-ease: cubic-bezier(0.2, 0, 0, 1);
    --osc-duration-fast: 150ms;
    --osc-duration-base: 200ms;

    /* Use the admin surfaces through the theme's own variable names. The accent
       variables themselves are inherited unchanged, so the theme colour wins. */
    --paper: var(--osc-bench-warm);
    --surface: var(--osc-bench);
    --sunk: var(--osc-bench-sunk);
    --ink: var(--osc-ink);
    --muted: var(--osc-ink-muted);
    --line: var(--osc-rule);
    --line-strong: var(--osc-rule-strong);
    --radius: var(--osc-radius);
    --radius-s: var(--osc-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .home-cat-band,
    .reader-tools,
    .reader-tools-sheet,
    .results-filterbar,
    .crumbs-band {
        --osc-duration-fast: 0ms;
        --osc-duration-base: 0ms;
    }
}