/* * tokens.css — Design tokens (CSS custom properties) * All colour, spacing, shadow, and radius values live here. * Swap themes by toggling [data-theme] on . */ :root { /* ── Palette: light ── */ --bg-app: #f0f2f5; --bg-card: #ffffff; --bg-header: rgba(255, 255, 255, 0.97); --bg-graph: #fafbfc; --text-1: #1a2332; --text-2: #55657a; --text-3: #8898aa; --border: #e2e8f0; /* ── Accent ── */ --accent: #667eea; --accent-dark: #764ba2; --accent-glow: rgba(102, 126, 234, 0.18); /* ── Shadows ── */ --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12); /* ── Radii ── */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; /* ── Layout dimensions ── */ --sidebar-w: 340px; /* ── Node colours ── */ --node-root: #dc3545; --node-reference: #2c7be5; --node-citation: #00b74a; --node-expanded: #8e44ad; --node-selected: #f39c12; --node-text: #ffffff; /* ── Link colours ── */ --link-color: #94a3b8; /* ── Graph node stroke: dark ring on light bg ── */ --node-stroke: rgba(0, 0, 0, 0.22); --node-stroke-w: 2.5px; } /* ── Dark theme overrides ── */ [data-theme="dark"] { --bg-app: #0f1117; --bg-card: #1a1d2e; --bg-header: rgba(20, 22, 36, 0.97); --bg-graph: #131622; --text-1: #e8eaf0; --text-2: #9ba8be; --text-3: #5c6a82; --border: #2a2e44; --accent: #7b8fff; --accent-dark: #a97cf5; --accent-glow: rgba(123, 143, 255, 0.18); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.45); /* ── Node colours (brighter for dark bg) ── */ --node-root: #ff6b6b; --node-reference: #5b9bf5; --node-citation: #4ade80; --node-expanded: #c084fc; --node-selected: #fbbf24; --node-text: #ffffff; /* ── Link colours ── */ --link-color: #64748b; /* ── Graph node stroke: white ring on dark bg ── */ --node-stroke: rgba(255, 255, 255, 0.88); --node-stroke-w: 3px; }