/**
 * Unified toolbar color system.
 *
 * Every per-brush control row (#city-controls, #morph-controls, #veil-
 * controls, ...) and every top mode panel (#panel-select, #panel-draw,
 * #panel-grav, #panel-palec, #panel-text, #panel-canvas, #panel-toolbar-*)
 * used to be hand-colored with its OWN arbitrary Tailwind hue — emerald for
 * City, fuchsia for Morph, violet for Node, indigo for Vortex, cyan for
 * Veil, rose for Shooter/Palec, amber for Orbital, purple for Iso/Symmetry,
 * blue for Gravity, yellow for Text, plain gray for Canvas — 300+ hardcoded
 * color-utility classes across a dozen+ unrelated hues, NONE of them wired
 * to js/ui/theme-engine.js. Switching the app's actual theme (Night/Day/
 * Retro/Aerial/Lab/...) never touched any of it.
 *
 * css/default-monochrome.css already solved exactly this problem for ONE
 * theme (see its html[data-anachrist-theme="default-monochrome"] rule,
 * line ~27) by forcing #settings-container et al. onto --ui-bg-surface.
 * This file generalizes that same idea — same --ui-*/--theme-* tokens,
 * same "beat the utility class on specificity, no markup rewrite needed
 * for panel roots" approach — to EVERY theme, and reaches further in: the
 * per-brush label/border/field/range/button colors inside those panels,
 * which the monochrome-only rule never touched either.
 *
 * Loaded after tailwind.css/editor.css/default-monochrome.css so the new
 * .tb-* classes (swapped in for the old hue-specific utility classes —
 * see index.html) win the cascade on equal specificity without needing
 * !important; the ID rules below win on specificity alone (no rewrite of
 * each panel's own background-utility class was needed for those).
 */

/* Panel containers — one flat surface instead of a different pastel per
   mode/panel. Content and labels still tell you which mode you're in. */
#settings-container,
#panel-toolbar-file, #panel-toolbar-worldpresets, #panel-toolbar-symmetry,
#panel-select, #panel-draw, #panel-grav, #panel-palec, #panel-text, #panel-canvas,
#app-info-dialog {
    background: var(--ui-bg-surface);
    color: var(--ui-fg-primary);
    border-color: var(--ui-border-default);
}
#app-info-dialog h2 { color: var(--ui-fg-primary); }
#app-info-dialog::backdrop { background: rgba(0, 0, 0, .5); }

/* Label / hint text — was text-<hue>-600/700 (regular) and text-<hue>-800/900
   (bold section headers) across a dozen hues. */
.tb-label { color: var(--ui-fg-secondary); }
.tb-label-strong { color: var(--ui-fg-primary); }
.tb-text-danger { color: var(--theme-danger); }

/* Dividers, field borders — was border-<hue>-100/200/300/700/800. */
.tb-border { border-color: var(--ui-border-default); }

/* Select/input/secondary-button surface — was bg-white paired with a
   border-<hue>-300, hardcoded regardless of theme. */
.tb-surface { background: var(--ui-bg-control); color: var(--ui-fg-primary); border-color: var(--ui-border-default); }

/* Range slider thumb — was accent-<hue>-500/600 (one per brush) / accent-gray-700. */
.tb-range { accent-color: var(--theme-accent); }

/* Keyboard focus ring — was ad hoc focus:ring-<hue>-500. */
.tb-focus:focus { outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }

/* Primary action (Evolve, Export, New project, Apply preset, ...) — was a
   different solid bg-<hue>-500/600/700 (+ a couple of bg-gradient-to-r
   pairs) per button. --ui-fg-on-active is the theme's own "readable text
   on an attention-grabbing surface" token (theme-engine.js cssVars()) —
   used here instead of a hardcoded white, since e.g. the default-monochrome
   theme's own accent color IS white. */
.tb-btn-primary { background: var(--theme-accent); color: var(--ui-fg-on-active); border-color: var(--theme-accent-strong); }
.tb-btn-primary:hover { background: var(--theme-accent-strong); }

/* Destructive action (Smazat / delete) — was bg-red-500/600. */
.tb-btn-danger { background: var(--theme-danger); color: var(--ui-fg-on-active); border-color: var(--theme-danger); }
.tb-btn-danger:hover { filter: brightness(1.12); }

/* Secondary/utility action (Aplikovat, Animovat FX, − remove-color, ...) —
   was a plain dark bg-gray-700/800, kept visually quieter than the primary
   accent buttons above rather than folded into them. */
.tb-btn-secondary { background: var(--theme-surface-3); color: var(--ui-fg-primary); border-color: var(--ui-border-default); }
.tb-btn-secondary:hover { background: var(--theme-accent-soft); }

/* 1px vertical separator bar (background-as-rule, not border-based). */
.tb-divider-bar { background: var(--ui-border-default); }

/* "Exportovat do nové vrstvy" bake buttons (Paper FX / ASCII Art drawers) —
   was a literal inline style="background:#059669;border-color:#10b981;
   color:#fff" on both, same primary-action treatment as everything else. */
.btn-bake-layer { background: var(--theme-accent); border: 1px solid var(--theme-accent-strong); color: var(--ui-fg-on-active); }
.btn-bake-layer:hover { background: var(--theme-accent-strong); }

/* Main canvas workspace surround — theme-engine.js already ships a
   dedicated token for exactly this (--ui-bg-canvas-surround /
   --theme-canvas-surround) that nothing was actually using. */
#workspace.tb-canvas-surround { background: var(--ui-bg-canvas-surround); }