/* BOZON.PRO — Design tokens * Source of truth: DESIGN_SYSTEM.md * Light theme is default. Switch via . */ :root, :root[data-theme="light"] { /* Surfaces */ --bg: #FAF9F5; --bg-elev: #FFFFFF; --bg-panel: #FFFFFF; --bg-sunken: #F4F2EC; /* Text */ --text: #1F1D1A; --text-mut: #6B665C; --text-dim: #9A968C; /* Borders */ --border: #E8E4DA; --border-soft: #EFEBE0; /* Brand accent (ochra) */ --accent: #C96442; --accent-soft: #F2E4DA; --accent-ink: #FFFFFF; /* Semantic */ --success: #3F7D58; --danger: #B3534B; /* Shadows (only for floating layers) */ --shadow-sm: 0 1px 0 rgba(60, 50, 30, 0.04); --shadow-md: 0 1px 2px rgba(60, 50, 30, 0.04), 0 12px 24px rgba(60, 50, 30, 0.06); /* Radii — single token + named aliases for legacy CSS that expects --radius-{sm,md,lg}. */ --radius: 12px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Density (regular) */ --pad: 18px; --pad-lg: 26px; --gap: 18px; --row-h: 46px; } :root[data-theme="dark"] { --bg: #1B1A17; --bg-elev: #23211D; --bg-panel: #26241F; --bg-sunken: #1F1D1A; --text: #F1EFE8; --text-mut: #9A968C; --text-dim: #6E6A60; --border: #332F29; --border-soft: #2A2722; --accent: #E89070; --accent-soft: color-mix(in oklch, #E89070 18%, transparent); --accent-ink: #FFFFFF; --success: #7FB781; --danger: #D77873; --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 24px rgba(0, 0, 0, 0.3); } /* ─── Accent palettes ────────────────────────────────────────────────── * Default ochre is set on :root above. These override --accent / * --accent-soft when carries a data-accent attribute. Light first, * dark variants below. */ :root[data-accent="ochra"] { --accent: #C96442; --accent-soft: #F2E4DA; } :root[data-accent="forest"] { --accent: #5A7A5B; --accent-soft: #E4ECDE; } :root[data-accent="slate"] { --accent: #3F4A57; --accent-soft: #E2E6EC; } :root[data-theme="dark"][data-accent="ochra"] { --accent: #E89070; --accent-soft: color-mix(in oklch, #E89070 18%, transparent); } :root[data-theme="dark"][data-accent="forest"] { --accent: #9DBA8E; --accent-soft: color-mix(in oklch, #9DBA8E 18%, transparent); } :root[data-theme="dark"][data-accent="slate"] { --accent: #9AABBD; --accent-soft: color-mix(in oklch, #9AABBD 18%, transparent); }