/* * tokens.css — Atidaryta visual system tokens * Single source of truth for all colors, typography, and data-class indicators. * Light mode is default (:root). Dark mode swaps via [data-theme="dark"] on . * All colors in OKLCH (perceptually uniform). sRGB hex fallbacks in comments. * Component spec: atidaryta_component_spec_v1.md * Last updated: 2026-06-03 */ /* ============================================================ BASE / SURFACE — LIGHT MODE (default) ============================================================ */ :root { /* Surfaces */ --bg-page: oklch(0.97 0.008 95); /* warm cream ~#FBFAF6 */ --bg-surface: oklch(0.99 0.004 95); /* cards, panels ~#FEFDFB */ --bg-sunken: oklch(0.94 0.010 95); /* wells, insets ~#F0EEE8 */ /* Borders */ --border-hair: oklch(0.88 0.010 95); /* 1px borders ~#E2DFD8 */ --border-strong: oklch(0.78 0.012 95); /* dividers ~#C4BFB5 */ /* Text */ --text-primary: oklch(0.25 0.010 60); /* body ~#3A352E */ --text-secondary: oklch(0.50 0.010 60); /* metadata ~#787068 */ --text-faint: oklch(0.65 0.008 60); /* timestamps ~#A39C92 */ /* ============================================================ FACTION COLORS — LIGHT MODE Calibrated to VRK 2024 official electoral map colors. Named by abbreviation. Never reassign hues — breaks user memory. ============================================================ */ --faction-lsdpf: oklch(0.62 0.17 25); /* red ~#E84A4A */ --faction-tslkdf: oklch(0.58 0.13 250); /* blue ~#2E7CC4 */ --faction-naf: oklch(0.58 0.07 65); /* brown ~#A8784E */ --faction-dfvl: oklch(0.72 0.10 195); /* teal ~#3DBFC4 */ --faction-lsf: oklch(0.68 0.17 55); /* orange ~#F08020 */ --faction-lvzksf: oklch(0.66 0.13 150); /* green ~#4CA864 */ --faction-misri: oklch(0.58 0.02 250); /* slate ~#6E7C8C */ /* Faction card tints — pale wash for Žmonės grid backgrounds */ /* Formula: oklch(0.95 0.025 ) */ --faction-lsdpf-tint: oklch(0.95 0.025 25); --faction-tslkdf-tint: oklch(0.95 0.025 250); --faction-naf-tint: oklch(0.95 0.025 65); --faction-dfvl-tint: oklch(0.95 0.025 195); --faction-lsf-tint: oklch(0.95 0.025 55); --faction-lvzksf-tint: oklch(0.95 0.025 150); --faction-misri-tint: oklch(0.95 0.000 250); /* true grey — no party hue */ /* ============================================================ TOPIC COLORS — LIGHT MODE Low chroma (muted earth tones). 5 macro-categories only. Chroma 0.06 = less than half faction chroma — topics read as "category", factions read as "identity". Intentional. ============================================================ */ --topic-econ: oklch(0.70 0.06 85); /* mustard/sand ~#B5A06A */ --topic-social: oklch(0.70 0.06 145); /* sage green ~#7E9C7A */ --topic-security: oklch(0.70 0.06 35); /* terracotta ~#BC8A72 */ --topic-institut: oklch(0.70 0.06 240); /* dusty blue ~#7E92AE */ --topic-other: oklch(0.70 0.03 300); /* muted lavender ~#9D8FA0 */ /* ============================================================ SIGNAL COLORS — LIGHT MODE Medium chroma. Desaturated brights. Distinct from factions + topics. No red/green (those imply good/bad — signals never judge). Always paired with a glyph + label. Never color alone. ============================================================ */ --signal-shift: oklch(0.60 0.10 60); /* amber — Pozicijos pokytis */ --signal-diverge: oklch(0.60 0.10 15); /* rose — Frakcijos atskirtis */ --signal-absence: oklch(0.60 0.08 230); /* slate — Reikšmingo bals. praleidimas */ --signal-lowpass: oklch(0.60 0.10 320); /* orchid — Priimta esant mažam dalyvavimui */ --signal-stall: oklch(0.60 0.10 110); /* olive — Įstrigęs komitete */ --signal-crossfac: oklch(0.60 0.10 180); /* cyan — Tarpfrakcinis palaikymas */ /* ============================================================ VOTE COLORS — LIGHT MODE FOR and AGAINST: identical L and C, differ only in hue. Neither looks stronger — no FOR/AGAINST visual hierarchy. Green/red exception: universal vote convention (Už/Prieš). ============================================================ */ --vote-for: oklch(0.58 0.12 145); /* warm green ~#5C8C5A */ --vote-against: oklch(0.58 0.12 25); /* warm red ~#C16551 */ --vote-abstain: oklch(0.70 0.03 95); /* desaturated grey-warm */ --vote-absent-border: oklch(0.70 0.02 95); /* outline only — used as border-color */ /* ============================================================ TYPOGRAPHY SCALE Source Serif 4 for headlines. Inter for body/UI/data. JetBrains Mono for IDs, timestamps, version strings. Ratio: 1.250 major-third, rounded for screen. ============================================================ */ --text-display: 38px; /* Source Serif 600 — page H1, masthead */ --text-h1: 30px; /* Source Serif 600 — section heads */ --text-h2: 24px; /* Source Serif 600 — card titles, bill titles */ --text-h3: 19px; /* Source Serif 400 — sub-sections */ --text-lead: 18px; /* Source Serif 400 — intro paragraphs */ --text-body: 16px; /* Inter 400 — body text */ --text-label: 14px; /* Inter 500 — UI labels, filters */ --text-small: 13px; /* Inter 400 — metadata, captions */ --text-micro: 11px; /* Inter 500 — badges, data-class, caps */ --text-mono: 13px; /* Plex Mono 400 — IDs, timestamps, versions */ --leading-display: 1.15; --leading-h: 1.25; --leading-body: 1.55; --leading-label: 1.40; /* ============================================================ DATA-CLASS BADGE TOKENS Monochrome only — shape carries meaning, not color. Rendered in --text-secondary. Never compete with data color. ============================================================ */ --dataclass-color: var(--text-secondary); /* all badges use this */ } /* ============================================================ DARK MODE Single attribute swap on . Hue families preserved — user never re-learns the color language. Faction/topic hues held constant; L and C shift slightly. ============================================================ */ [data-theme="dark"] { /* Surfaces */ --bg-page: oklch(0.18 0.008 250); /* warm charcoal ~#1C1E22 */ --bg-surface: oklch(0.22 0.010 250); /* cards ~#24262B */ --bg-sunken: oklch(0.15 0.008 250); /* wells ~#16181B */ /* Borders */ --border-hair: oklch(0.30 0.010 250); /* 1px borders ~#34373D */ --border-strong: oklch(0.40 0.012 250); /* dividers ~#4C5057 */ /* Text */ --text-primary: oklch(0.92 0.008 95); /* body ~#EBE8E2 */ --text-secondary: oklch(0.70 0.008 95); /* metadata ~#ABA69D */ --text-faint: oklch(0.55 0.008 95); /* timestamps ~#827C73 */ /* Factions — lift lightness, hold hue, trim chroma slightly */ --faction-lsdpf: oklch(0.66 0.16 25); --faction-tslkdf: oklch(0.66 0.12 250); --faction-naf: oklch(0.64 0.07 65); --faction-dfvl: oklch(0.76 0.09 195); --faction-lsf: oklch(0.72 0.15 55); --faction-lvzksf: oklch(0.70 0.12 150); --faction-misri: oklch(0.64 0.02 250); /* Faction tints — faint glow on charcoal */ /* Formula: oklch(0.26 0.025 ) */ --faction-lsdpf-tint: oklch(0.26 0.025 25); --faction-tslkdf-tint: oklch(0.26 0.025 250); --faction-naf-tint: oklch(0.26 0.025 65); --faction-dfvl-tint: oklch(0.26 0.025 195); --faction-lsf-tint: oklch(0.26 0.025 55); --faction-lvzksf-tint: oklch(0.26 0.025 150); --faction-misri-tint: oklch(0.26 0.000 250); /* true grey */ /* Topics — lift lightness slightly */ --topic-econ: oklch(0.72 0.06 85); --topic-social: oklch(0.72 0.06 145); --topic-security: oklch(0.72 0.06 35); --topic-institut: oklch(0.72 0.06 240); --topic-other: oklch(0.72 0.03 300); /* Signals — lift lightness */ --signal-shift: oklch(0.70 0.10 60); --signal-diverge: oklch(0.70 0.10 15); --signal-absence: oklch(0.70 0.08 230); --signal-lowpass: oklch(0.70 0.10 320); --signal-stall: oklch(0.70 0.10 110); --signal-crossfac: oklch(0.70 0.10 180); /* Votes — lift lightness */ --vote-for: oklch(0.65 0.12 145); --vote-against: oklch(0.65 0.12 25); --vote-abstain: oklch(0.55 0.03 95); --vote-absent-border: oklch(0.45 0.02 95); /* Typography scale unchanged in dark mode — sizes don't change */ } /* ============================================================ FONT FACES — self-hosted, no CDN All woff2 files in public/fonts/. GDPR-safe, no IP leak. latin-ext subset covers full Lithuanian character set. ============================================================ */ /* Inter — regular */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2'); } /* Inter — regular italic */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/inter-v20-latin_latin-ext-italic.woff2') format('woff2'); } /* Inter — medium 500 */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2'); } /* Inter — medium italic 500 */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url('../fonts/inter-v20-latin_latin-ext-500italic.woff2') format('woff2'); } /* Inter — semibold 600 */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2'); } /* Inter — semibold italic 600 */ @font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/inter-v20-latin_latin-ext-600italic.woff2') format('woff2'); } /* Source Serif 4 — regular */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/source-serif-4-v14-latin_latin-ext-regular.woff2') format('woff2'); } /* Source Serif 4 — semibold 600 */ @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/source-serif-4-v14-latin_latin-ext-600.woff2') format('woff2'); } /* Source Serif 4 — semibold italic 600 */ @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 600; font-display: swap; src: url('../fonts/source-serif-4-v14-latin_latin-ext-600italic.woff2') format('woff2'); } /* JetBrains Mono — regular */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2'); }