/* CodeLoupe design tokens. Dark is the default; add data-theme="light" to for light. */ :root, [data-theme="dark"] { /* Brand (from the plugin icon) */ --brand-indigo: #1C1F3D; --brand-ink: #E8EAF6; --brand-coral: #FF6B4A; --brand-amber: #FFB14A; --brand-sky: #4AC9FF; --brand-blue: #4A7CFF; --brand-yellow: #FFE14A; --brand-mint: #3AD6A0; /* Heat ramp (cold → hot), used by the map */ --heat-0: #FFFFFF; --heat-50: #FFA500; --heat-100: #FF0000; --heat-gradient: linear-gradient(90deg, #FFFFFF, #FFA500, #FF0000); /* Surfaces & text */ --bg: #0B0C1A; --bg-2: #0F1124; --surface: #13152B; --surface-2: #1A1D38; --band: #1C1F3D; --line: rgba(232,234,246,.09); --line-2: rgba(232,234,246,.17); --text: #E8EAF6; /* 16.2:1 on --bg */ --text-2: #B9BCD9; /* 10.6:1 */ --text-3: #8D92B8; /* 6.3:1 */ --chip: rgba(232,234,246,.07); /* Actions */ --accent: #FF6B4A; /* button fill, text on it = --accent-ink (5.9:1) */ --accent-hover: #FF8467; --accent-ink: #1C1F3D; --accent-text: #FF8C70; /* links on --bg, 7.6:1 */ --btn2: rgba(232,234,246,.06); --btn2-hover: rgba(232,234,246,.12); --focus: #4AC9FF; /* Map */ --map-bg: #111327; --map-dir: rgba(232,234,246,.045); --map-dir-stroke: rgba(232,234,246,.22); --map-file-stroke: rgba(11,12,26,.55); --map-label: #D4D7EE; --map-neutral: #2F3358; --map-silo: #E8EAF6; --tip-bg: #1F2240; /* IDE mockups (Darcula-like) */ --ide-bg: #2B2D30; --ide-editor: #1E1F22; --ide-border: #1E1F22; --ide-line: #393B40; --ide-text: #DFE1E5; --ide-text-2: #9DA0A8; --ide-sel: #2E436E; --ide-banner: #3A2C1E; --ide-banner-text: #F4D9BC; --ide-accent: #6C9CF8; --syn-kw: #CF8E6D; --syn-fn: #56A8F5; --syn-prop: #C77DBB; --syn-plain: #BCBEC4; } [data-theme="light"] { --bg: #F7F7FB; --bg-2: #EFF0F7; --surface: #FFFFFF; --surface-2: #F0F1F8; --band: #1C1F3D; --line: rgba(28,31,61,.10); --line-2: rgba(28,31,61,.18); --text: #1C1F3D; /* 15.0:1 on --bg */ --text-2: #444970; /* 8.4:1 */ --text-3: #5C6187; /* 5.8:1 */ --chip: rgba(28,31,61,.06); --accent: #FF6B4A; --accent-hover: #FF5A36; --accent-ink: #1C1F3D; --accent-text: #C0391A; /* 5.1:1 */ --btn2: #FFFFFF; --btn2-hover: #F0F1F8; --focus: #2F5BE0; --map-bg: #FFFFFF; --map-dir: rgba(28,31,61,.035); --map-dir-stroke: rgba(28,31,61,.26); --map-file-stroke: rgba(28,31,61,.3); --map-label: #2A2E52; --map-neutral: #DCDEEC; --map-silo: #1C1F3D; --tip-bg: #FFFFFF; --ide-bg: #F7F8FA; --ide-editor: #FFFFFF; --ide-border: #EBECF0; --ide-line: #EBECF0; --ide-text: #1E1F22; --ide-text-2: #6C707E; --ide-sel: #D4E2FF; --ide-banner: #FFF1E2; --ide-banner-text: #5A3510; --ide-accent: #3574F0; --syn-kw: #0033B3; --syn-fn: #00627A; --syn-prop: #871094; --syn-plain: #080808; } /* Author mode: Tableau10 */ :root { --cat-1: #4E79A7; --cat-2: #F28E2B; --cat-3: #E15759; --cat-4: #76B7B2; --cat-5: #59A14F; --cat-6: #EDC948; --cat-7: #B07AA1; --cat-8: #FF9DA7; --cat-9: #9C755F; --cat-10: #BAB0AC; } /* Type — Geist (UI, headlines) + JetBrains Mono (paths, metrics, code) */ :root { --font-sans: "Geist", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --type-display: 600 clamp(42px, 7.4vw, 86px)/0.98 var(--font-sans); /* letter-spacing -0.04em */ --type-h2: 600 clamp(30px, 4vw, 46px)/1.08 var(--font-sans); /* -0.03em */ --type-h3: 600 20px/1.25 var(--font-sans); /* -0.01em */ --type-lead: 400 clamp(17px, 1.6vw, 20px)/1.55 var(--font-sans); --type-body: 400 16px/1.6 var(--font-sans); --type-small: 400 14px/1.5 var(--font-sans); --type-mono: 500 13px/1.5 var(--font-mono); --type-mono-sm: 400 12px/1.5 var(--font-mono); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --space-section: clamp(72px, 9vw, 120px); --container: 1200px; --gutter: 24px; }