/* Yoke — design system tokens + shared component CSS. * Ported verbatim from the design-handoff bundle (styles-hybrid.css + * styles-app.css). Light is the default; dark mode applies when the * element has data-theme="dark". Theme persists via localStorage * (see /static/yoke-theme.js). */ :root { --bg: #E9EDF4; --bg-2: #E2E7F1; --surface: #FFFFFF; --surface-2: #EDF0F6; /* Solid white card surface, exposed as a non-self-referential token so the * .yoke-legacy layer can map --card to white without the var() cycle that * would otherwise collapse --card onto --surface-2. Mirrors --surface. */ --card-bg: #FFFFFF; --text: #0A0E1A; --text-2: #434A60; --muted: #6E7790; --muted-2: #9AA0B2; --line: rgba(10, 14, 26, 0.12); --line-2: rgba(10, 14, 26, 0.20); --blue: #2563EB; --blue-soft: #3B82F6; --mint: #10B981; --violet: #8B5CF6; --amber: #D97706; --pink: #DB2777; --rose: #E11D48; --nav-bg: rgba(255, 255, 255, 0.78); --hero-tint-1: rgba(37, 99, 235, 0.07); --hero-tint-2: rgba(139, 92, 246, 0.05); --shadow-sm: 0 1px 2px rgba(10,14,26,0.06), 0 1px 3px rgba(10,14,26,0.04); --shadow-md: 0 10px 28px -10px rgba(10,14,26,0.16); --shadow-lg: 0 30px 80px -30px rgba(10,14,26,0.24); --shadow-glow: 0 0 0 1px rgba(37,99,235,0.22), 0 10px 30px -10px rgba(37,99,235,0.30); --grad-text: linear-gradient(180deg, #0A0E1A 0%, #4A5168 100%); --grad-accent: linear-gradient(120deg, var(--blue) 0%, var(--violet) 50%, var(--pink) 100%); --grad-logo: linear-gradient(135deg, var(--blue) 0%, var(--violet) 100%); --modal-back: rgba(10, 14, 26, 0.35); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 32px; --container: 1240px; --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; } :root[data-theme="dark"] { --bg: #070912; --bg-2: #0B0F1C; --surface: #0F1320; --surface-2: #161B2C; --card-bg: #0F1320; --text: #E8ECF5; --text-2: #B0B8CC; --muted: #6B7388; --muted-2: #4A516A; --line: rgba(255, 255, 255, 0.07); --line-2: rgba(255, 255, 255, 0.12); --blue: #4A8BFF; --blue-soft: #6FA3FF; --mint: #34D399; --violet: #A78BFA; --amber: #FBBF24; --pink: #F472B6; --rose: #FB7185; --nav-bg: rgba(7, 9, 18, 0.65); --hero-tint-1: rgba(74, 139, 255, 0.18); --hero-tint-2: rgba(167, 139, 250, 0.08); --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 16px 40px -16px rgba(0,0,0,0.6); --shadow-lg: 0 60px 120px -40px rgba(0,0,0,0.7); --shadow-glow: 0 0 0 1px rgba(74,139,255,0.4), 0 10px 30px -10px rgba(74,139,255,0.6); --grad-text: linear-gradient(180deg, #FFFFFF 0%, #94A2C7 100%); --modal-back: rgba(3, 5, 12, 0.7); } /* Only apply this base body styling to pages that opt in via the * yoke-surface class — that way existing dashboards/reports with their * own inline