/* * Design tokeny prevzate z Portaro/phoenix/apps/tolarie-eshop * (design/extracted/css/03-tokens.css). Tenhle soubor se needituje - * pri zmene v Portaru se prekopiruje, at maji oba weby stejnou paletu. */ /* ============================================================ Tolarie e-shop — design tokens Light / dark mode + gold / cinnabar accent (via data-* on root) ============================================================ */ :root { /* brand palette — same as brand book */ --c-paper: #f4ecdb; --c-paper-deep: #e9ddc2; --c-paper-edge: #d9ccae; --c-ink: #1a1612; --c-ink-soft: #2a241d; --c-ink-deep: #100d0a; --c-gold: #c9a24a; --c-gold-soft: #e6cb87; --c-brass: #8e6b2c; --c-cinnabar: #8b2e2e; --c-patina: #2f5747; /* type */ --f-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; --f-body: 'Lora', 'Georgia', 'Times New Roman', serif; --f-mono: 'JetBrains Mono', ui-monospace, monospace; --f-sans: 'Inter Tight', 'Inter', -apple-system, system-ui, sans-serif; /* radii — sharp, paper-edge feel */ --r-1: 2px; --r-2: 4px; --r-3: 8px; --r-4: 14px; /* shadows */ --sh-card: 0 1px 0 rgba(26, 22, 18, 0.05), 0 8px 24px -12px rgba(26, 22, 18, 0.18); --sh-hover: 0 1px 0 rgba(26, 22, 18, 0.06), 0 18px 40px -18px rgba(26, 22, 18, 0.28); --sh-deep: 0 30px 80px -30px rgba(0, 0, 0, 0.55); /* ===== semantic tokens — DARK (default; viz [data-mode="light"] níže) ===== Dark je výchozí, aby se design správně vybarvil i bez JS, který nastavuje data-mode na (např. samostatný export jedné obrazovky). */ --bg: #15110d; --bg-elev: #1e1813; --bg-sunk: #100d0a; --bg-rule: rgba(230, 203, 135, 0.16); --bg-rule-soft: rgba(230, 203, 135, 0.08); --bg-overlay: rgba(0, 0, 0, 0.7); --fg: #f2e8d3; --fg-soft: #d4c5a4; --fg-mute: #9b8e72; --fg-faint: #6f6555; --fg-inv: var(--c-ink); --accent: var(--c-gold); --accent-soft: var(--c-gold-soft); --accent-deep: var(--c-gold-soft); --accent-ink: #100d0a; --ok: var(--c-patina); --warn: #c77e3b; --bad: var(--c-cinnabar); --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.6); --shadow-hover: 0 1px 0 rgba(0, 0, 0, 0.5), 0 22px 44px -18px rgba(0, 0, 0, 0.7); --shadow-deep: var(--sh-deep); } /* ===== LIGHT mode ===== */ [data-mode='light'] { --bg: var(--c-paper); --bg-elev: #fbf6e9; /* card surfaces */ --bg-sunk: var(--c-paper-deep); --bg-rule: rgba(26, 22, 18, 0.1); --bg-rule-soft: rgba(26, 22, 18, 0.06); --bg-overlay: rgba(26, 22, 18, 0.6); --fg: var(--c-ink); --fg-soft: #4a4036; --fg-mute: #7a6f5f; --fg-faint: #a99d85; --fg-inv: var(--c-paper); --accent: var(--c-gold); --accent-soft: var(--c-gold-soft); --accent-deep: var(--c-brass); --accent-ink: var(--c-ink); /* text color on accent fills */ --shadow-card: var(--sh-card); --shadow-hover: var(--sh-hover); --shadow-deep: var(--sh-deep); } /* ===== CINNABAR accent (overrides accent vars only) ===== */ [data-accent='cinnabar'] { --accent: var(--c-cinnabar); --accent-soft: #e89b9b; --accent-deep: #e89b9b; --accent-ink: #fff; } [data-mode='light'][data-accent='cinnabar'] { --accent-soft: #c66b6b; --accent-deep: #6f2424; }