/* Lambda-Phi design tokens. * * Source of truth: design/canvas/Lambda-Phi Design System.dc.html (v1 · 2026), * authored in claude.ai/design. Values here are transcribed from that canvas; * change the canvas first, then re-sync this file. * * This file declares custom properties only — importing it never changes the * appearance of a page by itself. Pair with lambda-phi.css for components. * * Theming: dark is the default. Opt into light and/or the brass accent by * setting both attributes on the same element (normally ): * */ :root { /* — grounds — */ --lp-void: #05070C; --lp-bg: #0A0E17; --lp-surface: #111725; --lp-surface2: #18202F; --lp-line: #232C40; --lp-line2: #33415C; /* — text — */ --lp-paper: #EDEFF5; --lp-mist: #AEB6C9; --lp-muted: #6E778C; --lp-muted-strong: #8A93A8; /* AA caption color on surface2 (5.30:1); --lp-muted fails there (§7.3) */ /* — accent · signal blue — */ --lp-accent: #4F8DF5; --lp-accent-strong: #2E6FE0; --lp-accent-300: #A9C6FF; --lp-accent-glow: rgba(79, 141, 245, .32); --lp-accent-tint-bg: rgba(79, 141, 245, .10); --lp-accent-tint-border: rgba(79, 141, 245, .28); --lp-hero-tint: rgba(79, 141, 245, .14); --lp-on-accent: #05070C; /* — brass · heritage note — */ --lp-brass: #C7A667; --lp-brass-300: #E4CE9E; --lp-brass-600: #A8894F; --lp-brass-tint-bg: rgba(199, 166, 103, .14); --lp-brass-tint-border: rgba(199, 166, 103, .3); /* — interaction — */ --lp-hover-tint: rgba(255, 255, 255, .04); --lp-backdrop: rgba(5, 7, 12, .6); /* — semantic — */ --lp-ok: #3FB97A; --lp-ok-text: #8FE3B4; --lp-ok-bg: rgba(63, 185, 122, .05); --lp-ok-border: rgba(63, 185, 122, .28); --lp-ok-tag-bg: rgba(63, 185, 122, .12); --lp-ok-tag-border: rgba(63, 185, 122, .3); --lp-warn: #E0A23C; --lp-warn-text: #F0C888; --lp-warn-bg: rgba(224, 162, 60, .05); --lp-warn-border: rgba(224, 162, 60, .28); --lp-warn-tag-bg: rgba(224, 162, 60, .12); --lp-warn-tag-border: rgba(224, 162, 60, .3); --lp-bad: #E06A5A; --lp-bad-text: #F0A99B; --lp-bad-bg: rgba(224, 106, 90, .05); --lp-bad-border: rgba(224, 106, 90, .28); --lp-bad-tag-bg: rgba(224, 106, 90, .12); --lp-bad-tag-border: rgba(224, 106, 90, .3); /* — elevation (edge + ambient darkness, never a heavy drop) — */ --lp-sh-rest: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 2px 8px rgba(0, 0, 0, .3); --lp-sh-raised: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 12px 30px rgba(0, 0, 0, .45); --lp-sh-overlay: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 24px 60px rgba(0, 0, 0, .6); --lp-sh-card: 0 12px 30px rgba(0, 0, 0, .35); /* — type — */ --lp-serif: 'Cormorant Garamond', Georgia, serif; --lp-sans: 'Archivo', system-ui, sans-serif; /* — space · 8px base scale (unit = 4px) — */ --lp-space-1: 4px; --lp-space-2: 8px; --lp-space-3: 12px; --lp-space-4: 16px; --lp-space-6: 24px; --lp-space-8: 32px; --lp-space-12: 48px; --lp-space-16: 64px; --lp-space-24: 96px; /* — radius — */ --lp-radius-sm: 4px; --lp-radius-md: 8px; --lp-radius-lg: 14px; --lp-radius-xl: 20px; /* overlay family: sheet, modal, undo bar (JobOps control system §7.1) */ --lp-radius-pill: 999px; /* — application-tier control sizes (JobOps control system §7.2) — */ --lp-ctl-h: 40px; --lp-ctl-h-bar: 36px; --lp-ctl-h-compact: 32px; --lp-touch: 44px; /* — motion · short and eased — */ --lp-motion-fast: 160ms; --lp-motion: 180ms; --lp-motion-slow: 220ms; --lp-ease: ease; } /* ── Light theme ─────────────────────────────────────────────────────────── */ [data-lp-theme="light"] { --lp-void: #FBFAF6; --lp-bg: #F2F0E9; --lp-surface: #FAF8F3; --lp-surface2: #ECE9E0; --lp-line: #DED9CC; --lp-line2: #C6C0AF; --lp-paper: #171B24; --lp-mist: #454C5E; --lp-muted: #79808F; --lp-muted-strong: #5E6778; /* AA caption color on light surface2 (4.69:1) */ /* accent deepens one step on light so contrast holds */ --lp-accent: #2E6FE0; --lp-accent-strong: #1F56B8; --lp-accent-300: #1D4FA8; --lp-accent-glow: rgba(46, 111, 224, .22); --lp-accent-tint-bg: rgba(46, 111, 224, .08); --lp-accent-tint-border: rgba(46, 111, 224, .30); --lp-hero-tint: rgba(46, 111, 224, .10); --lp-on-accent: #FBFAF6; --lp-brass: #A8894F; --lp-brass-300: #8A6D35; --lp-brass-600: #8A6D35; --lp-brass-tint-bg: rgba(168, 137, 79, .14); --lp-brass-tint-border: rgba(168, 137, 79, .35); --lp-hover-tint: rgba(23, 27, 36, .05); --lp-backdrop: rgba(23, 27, 36, .35); --lp-ok-text: #1E7A4C; --lp-ok-bg: rgba(63, 185, 122, .08); --lp-ok-border: rgba(30, 122, 76, .3); --lp-ok-tag-bg: rgba(63, 185, 122, .14); --lp-ok-tag-border: rgba(30, 122, 76, .35); --lp-warn-text: #8A6215; --lp-warn-bg: rgba(224, 162, 60, .08); --lp-warn-border: rgba(138, 98, 21, .3); --lp-warn-tag-bg: rgba(224, 162, 60, .16); --lp-warn-tag-border: rgba(138, 98, 21, .35); --lp-bad-text: #A63A28; --lp-bad-bg: rgba(224, 106, 90, .07); --lp-bad-border: rgba(166, 58, 40, .3); --lp-bad-tag-bg: rgba(224, 106, 90, .14); --lp-bad-tag-border: rgba(166, 58, 40, .35); --lp-sh-rest: 0 1px 2px rgba(23, 27, 36, .05), 0 2px 8px rgba(23, 27, 36, .05); --lp-sh-raised: 0 12px 30px rgba(23, 27, 36, .10); --lp-sh-overlay: 0 24px 60px rgba(23, 27, 36, .16); --lp-sh-card: 0 10px 26px rgba(23, 27, 36, .08); } /* ── Heritage-brass accent variant ───────────────────────────────────────── */ [data-lp-accent="brass"] { --lp-accent: #C7A667; --lp-accent-strong: #A8894F; --lp-accent-300: #E4CE9E; --lp-accent-glow: rgba(199, 166, 103, .30); --lp-accent-tint-bg: rgba(199, 166, 103, .10); --lp-accent-tint-border: rgba(199, 166, 103, .28); --lp-hero-tint: rgba(199, 166, 103, .12); --lp-on-accent: #05070C; } [data-lp-theme="light"][data-lp-accent="brass"] { --lp-accent: #A8894F; --lp-accent-strong: #8A6D35; --lp-accent-300: #7A5F2C; --lp-accent-glow: rgba(168, 137, 79, .28); --lp-accent-tint-bg: rgba(168, 137, 79, .10); --lp-accent-tint-border: rgba(168, 137, 79, .35); --lp-hero-tint: rgba(168, 137, 79, .12); --lp-on-accent: #FBFAF6; }