/* ══════════════════════════════════════════════════════════════ bb-theme.css — Branike Blocks semantic design tokens Mapuje Blocksy palette CSS vars na bb-* tokeny. Blocksy automaticky prepína hodnoty palette vars pri dark mode (.dark-mode trieda na ) — takže tieto tokeny zdedia prepínanie zadarmo bez extra CSS. Použitie v blokoch: background: var(--bb-surface); color: var(--bb-text); border: 1px solid var(--bb-border); Palette mapping (Blocksy default): color-1 = primary accent (modrá / teal v dark) color-2 = primary hover (tmavšia / teal-2 v dark) color-3 = muted text (sivá) color-4 = base text (čierna / biela v dark) color-5 = light border (svetlá sivá / tmavá v dark) color-6 = subtle surface (takmer biela / tmavá v dark) color-7 = surface-2 (biela / tmavo-sivá v dark) color-8 = surface (biela / najtemnejšia v dark) ═══════════════════════════════════════════════════════════════ */ :root { /* ── Farby povrchov ─────────────────────────────────────── */ --bb-surface: var(--theme-palette-color-8, #ffffff); --bb-surface-2: var(--theme-palette-color-7, #f8f9fa); --bb-surface-subtle: var(--theme-palette-color-6, #f0f2f4); /* ── Text ───────────────────────────────────────────────── */ --bb-text: var(--theme-palette-color-4, #1a1a1a); --bb-text-muted: var(--theme-palette-color-3, #6b7280); --bb-text-on-dark: var(--theme-palette-color-8, #ffffff); /* ── Primary / accent ───────────────────────────────────── */ --bb-primary: var(--theme-palette-color-1, #0EA5E9); --bb-primary-hover: var(--theme-palette-color-2, #0284C7); /* ── Borders ────────────────────────────────────────────── */ --bb-border: var(--theme-palette-color-5, rgba(0,0,0,.10)); --bb-border-strong: color-mix(in srgb, var(--bb-text) 20%, transparent); /* ── Tiene ──────────────────────────────────────────────── */ --bb-shadow-sm: 0 1px 3px color-mix(in srgb, var(--bb-text) 8%, transparent), 0 1px 2px color-mix(in srgb, var(--bb-text) 5%, transparent); --bb-shadow-md: 0 4px 6px color-mix(in srgb, var(--bb-text) 7%, transparent), 0 2px 4px color-mix(in srgb, var(--bb-text) 5%, transparent); --bb-shadow-lg: 0 10px 15px color-mix(in srgb, var(--bb-text) 8%, transparent), 0 4px 6px color-mix(in srgb, var(--bb-text) 5%, transparent); /* ── Overlay (modály, lightbox pozadie) ─────────────────── */ --bb-overlay: color-mix(in srgb, var(--bb-text) 60%, transparent); }