/** * Design tokens — the GenosDB vocabulary, verbatim. * * Two sets of values, one set of names. `data-theme` on swaps the block * and nothing else: no component rule anywhere mentions a theme. If switching * palettes ever forces a component change, the tokens are broken. */ :root { /* Backgrounds (dark → elevated) */ --bg-primary: #0d0f12; --bg-secondary: #14171c; --bg-tertiary: #1c2026; --bg-elevated: #22262d; /* Text */ --text-primary: #e8eaed; --text-secondary: #9aa3ad; --text-tertiary: #5c6570; /* Accent & status */ --accent: #4c8dff; --accent-hover: #6ba1ff; --ok: #34c77b; --warn: #f5a623; --danger: #ef5350; --violet: #a78bfa; /* Borders */ --border-subtle: #262b33; --border-strong: #333a44; /* Contrast pairs & elevation */ --text-on-accent: #ffffff; --backdrop: rgba(0, 0, 0, 0.6); --shadow: 0 8px 24px rgba(0, 0, 0, 0.35); /* Shape & rhythm (8px grid) */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; /* Typography */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; /* Layout */ --sidebar-width: 280px; } [data-theme="light"] { --bg-primary: #f4f6fa; --bg-secondary: #ffffff; --bg-tertiary: #f1f3f7; --bg-elevated: #ffffff; --text-primary: #1a1d24; --text-secondary: #6b7280; --text-tertiary: #9aa1ad; --accent: #2563eb; --accent-hover: #1d4ed8; --ok: #16a34a; --warn: #b45309; --danger: #dc2626; --violet: #7c3aed; --border-subtle: #e4e7ee; --border-strong: #d4d9e3; --text-on-accent: #ffffff; --backdrop: rgba(26, 29, 36, 0.45); --shadow: 0 6px 24px rgba(26, 29, 36, 0.07); }