/* Webisto semantic tokens — BADS Layer 3 * Role-based aliases that consume the primitives in tokens.css. * Load this AFTER tokens.css. Theming is controlled by the * `data-theme` attribute on (dark = default, light). */ :root { /* Surfaces */ --bg: var(--color-graphite-900); --bg-2: var(--color-graphite-800); /* canonical #11141a (index wins over logo's old #12151b) */ --paper: var(--color-paper-100); --paper-ink: var(--color-paper-ink); --graphite: var(--color-graphite-900); --bone: var(--color-bone-50); /* Ink (text) */ --ink: var(--color-bone-50); --ink-dim: var(--color-bone-dim); --ink-faint: var(--color-bone-faint); /* Brand accent */ --accent: var(--color-signal-500); --accent-soft: var(--color-signal-400); /* Borders / grid */ --line: rgba(233, 230, 223, 0.12); --line-strong: rgba(233, 230, 223, 0.24); --header-bg: rgba(13, 15, 18, 0.82); --gridline: rgba(233, 230, 223, 0.05); /* Typography aliases */ --sans: var(--font-sans); --mono: var(--font-mono); color-scheme: dark; } [data-theme="light"] { --bg: var(--color-paper-100); --bg-2: var(--color-paper-alt); --paper: var(--color-bone-50); --paper-ink: var(--color-paper-ink); --graphite: var(--color-graphite-900); --bone: var(--color-bone-50); --ink: var(--color-paper-ink); --ink-dim: rgba(22, 24, 28, 0.68); --ink-faint: rgba(22, 24, 28, 0.45); --accent: var(--color-signal-500); --accent-soft: var(--color-signal-400); --line: rgba(22, 24, 28, 0.12); --line-strong: rgba(22, 24, 28, 0.2); --header-bg: rgba(243, 238, 227, 0.85); --gridline: rgba(22, 24, 28, 0.06); color-scheme: light; }