:root, :host { --tail-paper: #ffffff; --tail-ink: #123269; --tail-blue: #1557ff; --tail-blue-deep: #093bc6; --tail-blue-light: #eaf1ff; --tail-line: #d4e1ff; --tail-muted: #536b92; --tail-console: #ffffff; --tail-surface: #f3f7ff; --tail-raised: #eaf1ff; --tail-stroke: #d4e1ff; --tail-text: #123269; --tail-secondary: #536b92; --tail-positive: #1557ff; --tail-caution: #234b93; --tail-down: #234b93; --tail-font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tail-radius: 12px; --tail-ease: cubic-bezier(.22, 1, .36, 1); /* Added 2026-09-18 for theming (see THEMES.md). Light values match what consumers already hard-coded, so light rendering is unchanged. */ --tail-wordmark: var(--tail-blue); --tail-card: #ffffff; --tail-ring: #c4d6ff; --tail-shadow: rgba(11, 31, 90, .28); --tail-notice-bg: #fff7e6; --tail-notice-line: #f3d9a4; --tail-notice-text: #6b4a00; /* Scales (2026-09-18, product UI). Theme-independent. */ --tail-space-1: 4px; --tail-space-2: 8px; --tail-space-3: 12px; --tail-space-4: 16px; --tail-space-5: 20px; --tail-space-6: 24px; --tail-space-8: 32px; --tail-radius-sm: 8px; --tail-radius-md: 12px; --tail-radius-lg: 16px; --tail-radius-xl: 22px; --tail-radius-pill: 999px; --tail-elev-1: 0 1px 2px var(--tail-shadow-soft, rgba(11, 31, 90, .06)), 0 1px 1px var(--tail-shadow-soft, rgba(11, 31, 90, .04)); --tail-elev-2: 0 6px 18px var(--tail-shadow-soft, rgba(11, 31, 90, .10)), 0 1px 3px var(--tail-shadow-soft, rgba(11, 31, 90, .06)); --tail-elev-3: 0 18px 50px var(--tail-shadow); --tail-dur-fast: 120ms; --tail-dur-base: 200ms; --tail-dur-slow: 320ms; --tail-text-display: 600 32px/36px var(--tail-font); --tail-text-title: 600 20px/26px var(--tail-font); --tail-text-headline: 600 15px/20px var(--tail-font); --tail-text-body: 400 14px/20px var(--tail-font); --tail-text-label: 500 13px/18px var(--tail-font); --tail-text-caption: 500 12px/16px var(--tail-font); --tail-text-legal: 400 11px/14px var(--tail-font); } /* Dark theme — opt-in, so existing light-only surfaces never flip by surprise. data-theme="dark" forces it; data-theme="auto" follows the OS. Set the attribute on for pages, or on the shadow host for components. */ :root[data-theme="dark"], :host([data-theme="dark"]) { --tail-paper: #0b1020; --tail-ink: #e8efff; --tail-blue: #4d86ff; --tail-blue-deep: #2f6bff; --tail-blue-light: #16244a; --tail-line: #24345f; --tail-muted: #8fa2cc; --tail-console: #0f1730; --tail-surface: #0b1226; --tail-raised: #16244a; --tail-stroke: #24345f; --tail-text: #e8efff; --tail-secondary: #93a6cf; --tail-positive: #6b98ff; --tail-caution: #b3c3ea; --tail-down: #b3c3ea; --tail-wordmark: #ffffff; --tail-card: #111a33; --tail-ring: #2b3f78; --tail-shadow: rgba(0, 0, 0, .55); --tail-shadow-soft: rgba(0, 0, 0, .35); --tail-notice-bg: #2a2210; --tail-notice-line: #5a4720; --tail-notice-text: #f3d9a4; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"], :host([data-theme="auto"]) { --tail-paper: #0b1020; --tail-ink: #e8efff; --tail-blue: #4d86ff; --tail-blue-deep: #2f6bff; --tail-blue-light: #16244a; --tail-line: #24345f; --tail-muted: #8fa2cc; --tail-console: #0f1730; --tail-surface: #0b1226; --tail-raised: #16244a; --tail-stroke: #24345f; --tail-text: #e8efff; --tail-secondary: #93a6cf; --tail-positive: #6b98ff; --tail-caution: #b3c3ea; --tail-down: #b3c3ea; --tail-wordmark: #ffffff; --tail-card: #111a33; --tail-ring: #2b3f78; --tail-shadow: rgba(0, 0, 0, .55); --tail-shadow-soft: rgba(0, 0, 0, .35); --tail-notice-bg: #2a2210; --tail-notice-line: #5a4720; --tail-notice-text: #f3d9a4; color-scheme: dark; } }