/* Private Echo portal — design tokens. * * The :root rule defines light-mode values. The [data-theme="dark"] * rule overrides only the colour tokens — typography, spacing, radius * are theme-agnostic so they live in :root only. * * The active theme is set on by an * inline script in base.html before first paint (no FOUC). Default * picks up prefers-color-scheme. */ /* ------------------------------------------------------------------ fonts */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/inter/inter-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/inter/inter-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/jetbrains-mono/jetbrains-mono-400.woff2") format("woff2"); } /* ------------------------------------------------------------------ light */ :root { /* surfaces */ --pe-bg-page: #f7f8fa; --pe-bg-surface: #ffffff; --pe-bg-elevated: #f0f2f5; --pe-bg-hover: rgba(15, 18, 25, 0.04); /* text */ --pe-text-primary: #18181b; --pe-text-secondary: #5b6370; --pe-text-tertiary: #8b94a3; --pe-text-inverse: #ffffff; /* borders */ --pe-border: rgba(15, 18, 25, 0.08); --pe-border-strong: rgba(15, 18, 25, 0.16); /* accent — teal */ --pe-accent: #1d9e75; --pe-accent-strong: #0f6e56; --pe-accent-bg: rgba(29, 158, 117, 0.10); --pe-accent-text: #ffffff; /* semantic */ --pe-success: #16a34a; --pe-success-bg: rgba(22, 163, 74, 0.12); --pe-warning: #d97706; --pe-warning-bg: rgba(217, 119, 6, 0.12); --pe-danger: #dc2626; --pe-danger-bg: rgba(220, 38, 38, 0.12); --pe-info: #2563eb; --pe-info-bg: rgba(37, 99, 235, 0.12); /* neutral pill (decommissioned, archived) */ --pe-neutral-bg: rgba(15, 18, 25, 0.06); --pe-neutral-text: #5b6370; /* shadows */ --pe-shadow-sm: 0 1px 2px rgba(15, 18, 25, 0.04), 0 1px 3px rgba(15, 18, 25, 0.06); --pe-shadow-md: 0 2px 4px rgba(15, 18, 25, 0.04), 0 4px 8px rgba(15, 18, 25, 0.06); --pe-shadow-lg: 0 8px 24px rgba(15, 18, 25, 0.10); /* spacing */ --pe-space-1: 4px; --pe-space-2: 8px; --pe-space-3: 12px; --pe-space-4: 16px; --pe-space-5: 20px; --pe-space-6: 24px; --pe-space-8: 32px; --pe-space-10: 40px; --pe-space-12: 48px; --pe-space-16: 64px; /* radius */ --pe-radius-sm: 6px; --pe-radius-md: 8px; --pe-radius-lg: 12px; --pe-radius-xl: 16px; --pe-radius-pill: 999px; /* type */ --pe-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --pe-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --pe-font-size-xs: 11px; --pe-font-size-sm: 13px; --pe-font-size-base: 14px; --pe-font-size-md: 15px; --pe-font-size-lg: 18px; --pe-font-size-xl: 22px; --pe-font-size-2xl: 28px; --pe-font-size-3xl: 36px; --pe-line-tight: 1.25; --pe-line-base: 1.45; --pe-line-loose: 1.6; /* layout */ --pe-sidebar-width: 232px; --pe-topbar-height: 56px; --pe-content-max: 1280px; /* motion */ --pe-transition-fast: 120ms; --pe-transition-base: 200ms; --pe-transition-slow: 320ms; } /* ------------------------------------------------------------------- dark */ [data-theme="dark"] { /* surfaces */ --pe-bg-page: #0a0d12; --pe-bg-surface: #14171c; --pe-bg-elevated: #1a1d24; --pe-bg-hover: rgba(255, 255, 255, 0.04); /* text */ --pe-text-primary: #e8eaed; --pe-text-secondary: #a8b0bd; --pe-text-tertiary: #6b7480; --pe-text-inverse: #0a0d12; /* borders */ --pe-border: rgba(255, 255, 255, 0.08); --pe-border-strong: rgba(255, 255, 255, 0.14); /* accent — teal (lighter for dark contrast) */ --pe-accent: #5eead4; --pe-accent-strong: #2dd4bf; --pe-accent-bg: rgba(94, 234, 212, 0.10); --pe-accent-text: #0a0d12; /* semantic — saturation tuned for dark bg */ --pe-success: #4ade80; --pe-success-bg: rgba(74, 222, 128, 0.14); --pe-warning: #fbbf24; --pe-warning-bg: rgba(251, 191, 36, 0.14); --pe-danger: #f87171; --pe-danger-bg: rgba(248, 113, 113, 0.14); --pe-info: #60a5fa; --pe-info-bg: rgba(96, 165, 250, 0.14); /* neutral */ --pe-neutral-bg: rgba(255, 255, 255, 0.06); --pe-neutral-text: #a8b0bd; /* shadows — softer in dark */ --pe-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 1px 3px rgba(0, 0, 0, 0.24); --pe-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.20), 0 4px 8px rgba(0, 0, 0, 0.24); --pe-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40); } /* Respect prefers-color-scheme as default when the user hasn't set a * preference explicitly. The inline script in base.html overrides this * by writing data-theme to early — but if JS is disabled we still * land on the right look. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }