/* ============================================================ KEEPR DESIGN SYSTEM — DESIGN TOKENS Single source of truth for the /app/ namespace. All styleguide pages link this file and reference var(--token). ============================================================ */ :root { /* ── Surfaces ── */ --surface-deep: #0c0c0c; --surface-body: #121212; --surface-card: #141414; --surface-container: #1e1e1e; --surface-elevated: #262626; /* ── Text ── (floor=160, ceiling=255, ratio-preserving ramp) */ --text-headline: #ffffff; --text-active: #fafafa; --text-strong: #f2f2f2; --text-body: #eaeaea; --text-secondary: #d1d1d1; --text-muted: #c5c5c5; --text-tertiary: #b9b9b9; --text-placeholder: #b1b1b1; --text-disabled: #a9a9a9; --text-ghost: #a0a0a0; /* ── Borders ── */ --border-subtle: #1e1e1e; --border-default: #333; --border-emphasis: #404040; --border-hover: #525252; /* ── Brand / Primary ── */ --primary-600: #9810fa; --primary-700: #8700e2; --primary-800: #6c00b6; --primary-light: #c084fc; --primary-violet: #a78bfa; /* ── Semantic: Success ── */ --success: #10b981; --success-text: #4ade80; --success-hover: #22c55e; --success-dark: #166534; /* ── Semantic: Warning ── */ --warning: #f59e0b; --warning-light: #fbbf24; --warning-yellow: #facc15; /* ── Semantic: Error ── */ --error-text: #f87171; --error: #dc2626; --error-hover: #ef4444; --error-light: #fca5a5; /* ── Semantic: Info & Accent ── */ --info: #38bdf8; --indigo: #6366f1; --indigo-light: #818cf8; --indigo-pale: #a5b4fc; --pink: #ec4899; /* ── Cyan (data viz / action accent) ── */ --cyan: #06b6d4; --cyan-light: #22d3ee; /* ── Graph Node Colors ── */ --graph-workflow: var(--primary-600); --graph-action: var(--cyan); --graph-side-effect: var(--warning); --graph-quality: #8b5cf6; --graph-spawn: var(--pink); /* ── Speaker Palette ── */ --speaker-0: #f59e0b; --speaker-1: #3b82f6; --speaker-2: #10b981; --speaker-3: #f43f5e; --speaker-4: #a855f7; /* ── Badge Overlays ── */ --badge-success-bg: rgba(16,185,129,0.12); --badge-success-border: rgba(16,185,129,0.25); --badge-warning-bg: rgba(245,158,11,0.18); --badge-warning-border: rgba(245,158,11,0.3); --badge-error-bg: rgba(239,68,68,0.18); --badge-error-border: rgba(239,68,68,0.3); --badge-info-bg: rgba(56,189,248,0.15); --badge-info-border: rgba(56,189,248,0.25); --badge-neutral-bg: rgba(115,115,115,0.18); --badge-neutral-border: rgba(115,115,115,0.3); --badge-primary-bg: rgba(152,16,250,0.15); --badge-primary-border: rgba(152,16,250,0.25); /* ── Interactive Overlays ── */ --primary-hover-bg: rgba(152,16,250,0.08); --primary-active-bg: rgba(152,16,250,0.1); --row-hover: rgba(255,255,255,0.02); --ghost-hover: rgba(255,255,255,0.05); /* ── Shadows ── */ --shadow-standard: 0 4px 16px rgba(0,0,0,0.5); --shadow-elevated: 0 8px 32px rgba(0,0,0,0.5); --shadow-maximum: 0 24px 64px rgba(0,0,0,0.6); --shadow-primary-glow: 0 4px 16px rgba(152,16,250,0.25); --shadow-success-glow: 0 4px 16px rgba(74,222,128,0.2); --shadow-primary-hover: 0 6px 24px rgba(152,16,250,0.35); /* ── Gradients ── */ --gradient-rainbow: linear-gradient(90deg, #10b981 0%, #6366f1 25%, #f59e0b 50%, #ec4899 75%, #9810fa 100%); /* ── Scrollbar ── */ --scrollbar-thumb: rgba(255, 255, 255, 0.12); --scrollbar-thumb-hover: rgba(255, 255, 255, 0.22); --scrollbar-track: transparent; /* ── Overlay ── */ --overlay-backdrop: rgba(0,0,0,0.5); } /* ============================================================ LIGHT THEME OVERRIDES Applied when Token names are identical — only values change. ============================================================ */ [data-theme="light"] { /* ── Surfaces ── (M3-grounded: ~6-lum even steps, deep=darkest, elevated=only pure white) Reference: Material 3 tone-based surface system, Radix 12-step functional scale */ --surface-deep: #E8E8E8; /* 232 — outermost page bg */ --surface-body: #EFEFEF; /* 239 — content area */ --surface-container: #F3F3F3; /* 243 — inputs, pills, recessed areas */ --surface-card: #FAFAFA; /* 250 — cards, sidebar */ --surface-elevated: #FFFFFF; /* 255 — dropdowns, modals (only pure white) */ /* ── Text ── (WCAG AA: 4.5:1 min for normal text, 3:1 for large text) Fixed: --text-muted now passes AA; --text-tertiary deduplicated */ --text-headline: #111111; /* ~16:1 on card — AAA */ --text-active: #1a1a1a; /* ~14:1 — AAA */ --text-strong: #1f1f1f; /* ~13:1 — AAA */ --text-body: #374151; /* ~8.5:1 — AAA */ --text-secondary: #4b5563; /* ~6.5:1 — AAA */ --text-muted: #6b7280; /* ~4.8:1 — AA pass (was 2.8:1 FAIL) */ --text-tertiary: #5c6370; /* ~5.0:1 — AA pass, nav items (was 3.4:1) */ --text-placeholder: #9ca3af; /* ~2.8:1 — placeholder exempt */ --text-disabled: #8b919a; /* ~3.5:1 — metadata footer text (was 2.0:1) */ --text-ghost: #d1d5db; /* ~1.4:1 — decorative only */ /* ── Borders ── (WCAG 1.4.11: 3:1 for interactive component boundaries) --border-emphasis now meets 3:1 threshold for input borders */ --border-subtle: #D4D4D8; /* decorative dividers */ --border-default: #B0B3B8; /* visible borders */ --border-emphasis: #7C8087; /* 3.3:1 on card — meets WCAG 1.4.11 */ --border-hover: #6b7280; /* 5.0:1 — interactive hover */ /* ── Cyan — darker for contrast on light ── */ --cyan: #0891b2; --cyan-light: #06b6d4; /* ── Graph — same vars, adjusted values ── */ --graph-quality: #7c3aed; /* ── Brand / Primary — adjust light-on-white variants ── */ --primary-light: #7c3aed; --primary-violet: #6d28d9; /* ── Semantic: Success ── */ --success-text: #16a34a; --success-dark: #dcfce7; /* ── Semantic: Warning ── */ --warning-light: #d97706; /* ── Semantic: Error ── */ --error-text: #dc2626; --error-light: #fee2e2; /* ── Badge Overlays — lower opacity on white ── */ --badge-success-bg: rgba(16,185,129,0.08); --badge-success-border: rgba(16,185,129,0.2); --badge-warning-bg: rgba(245,158,11,0.1); --badge-warning-border: rgba(245,158,11,0.2); --badge-error-bg: rgba(239,68,68,0.08); --badge-error-border: rgba(239,68,68,0.2); --badge-info-bg: rgba(56,189,248,0.08); --badge-info-border: rgba(56,189,248,0.2); --badge-neutral-bg: rgba(115,115,115,0.06); --badge-neutral-border: rgba(115,115,115,0.15); --badge-primary-bg: rgba(152,16,250,0.06); --badge-primary-border: rgba(152,16,250,0.15); /* ── Interactive Overlays — flip white→black ── */ --primary-hover-bg: rgba(152,16,250,0.06); --primary-active-bg: rgba(152,16,250,0.08); --row-hover: rgba(0,0,0,0.02); --ghost-hover: rgba(0,0,0,0.04); /* ── Shadows — lighter for white backgrounds ── */ --shadow-standard: 0 4px 16px rgba(0,0,0,0.06); --shadow-elevated: 0 8px 32px rgba(0,0,0,0.08); --shadow-maximum: 0 24px 64px rgba(0,0,0,0.12); --shadow-primary-glow: 0 4px 16px rgba(152,16,250,0.15); --shadow-success-glow: 0 4px 16px rgba(74,222,128,0.15); --shadow-primary-hover: 0 6px 24px rgba(152,16,250,0.2); /* ── Scrollbar ── */ --scrollbar-thumb: rgba(0, 0, 0, 0.15); --scrollbar-thumb-hover: rgba(0, 0, 0, 0.28); --scrollbar-track: transparent; /* ── Overlay ── */ --overlay-backdrop: rgba(0,0,0,0.3); }