/* Postern Mail — brand tokens Two themes, one brand. The dark theme is the public web surface and the product's marketing voice. The light theme is the administration backend, which sits on white. Load this file once, then set data-theme="dark" or data-theme="light" on . Never mix values across the two blocks. */ :root { /* Type */ --pm-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --pm-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Type scale (public web) */ --pm-text-display: 60px; --pm-text-h1: 42px; --pm-text-h2: 38px; --pm-text-h3: 20px; --pm-text-body-lg: 19px; --pm-text-body: 15.5px; --pm-text-small: 13px; --pm-text-eyebrow: 11px; /* Type scale (admin — one step tighter, denser screens) */ --pm-adm-h1: 26px; --pm-adm-h2: 18px; --pm-adm-body: 14px; --pm-adm-small: 12.5px; --pm-adm-eyebrow: 11px; /* Tracking */ --pm-track-display: -0.025em; --pm-track-eyebrow: 0.24em; --pm-track-wordmark: 0.22em; /* Radius & spacing (8px family, dense) */ --pm-radius-sm: 6px; --pm-radius: 8px; --pm-radius-lg: 14px; --pm-radius-pill: 999px; --pm-space-1: 4px; --pm-space-2: 8px; --pm-space-3: 12px; --pm-space-4: 16px; --pm-space-5: 24px; --pm-space-6: 32px; --pm-space-7: 48px; --pm-space-8: 96px; /* Brand constants — identical in both themes */ --pm-void: #06080F; --pm-hull: #0C1120; --pm-signal: #1E9DFF; --pm-beam: #6CC8FF; --pm-deep: #0D5A9E; --pm-light: #E9EEF7; } /* ---------- DARK — public website, product marketing, app dark mode ---------- */ [data-theme="dark"] { --pm-bg: #06080F; --pm-bg-raised: #0A0E1A; --pm-bg-panel: #080B14; --pm-bg-alt: #0C1120; --pm-border: rgba(140, 175, 220, 0.14); --pm-border-strong: rgba(140, 175, 220, 0.22); --pm-border-accent: rgba(30, 157, 255, 0.4); --pm-text: #E9EEF7; --pm-text-muted: #9AA3B6; --pm-text-dim: #6B7488; --pm-text-eyebrow-color: #5F7FA8; --pm-accent: #1E9DFF; --pm-accent-text: #6CC8FF; /* accent used AS text */ --pm-accent-tint: rgba(30, 157, 255, 0.14); --pm-focus: #1E9DFF; --pm-allowed: #6CC8FF; --pm-blocked: #FFB4A3; --pm-glow: drop-shadow(0 0 10px rgba(30, 157, 255, 0.45)); --pm-elev: 0 24px 70px rgba(0, 0, 0, 0.7); --pm-logo-mark-arch: #1E9DFF; --pm-logo-mark-glyph: #6CC8FF; --pm-logo-word: #E9EEF7; --pm-logo-word-mail: #6CC8FF; } /* ---------- LIGHT — administration backend (white ground) ---------- */ [data-theme="light"] { --pm-bg: #FFFFFF; --pm-bg-raised: #FFFFFF; --pm-bg-panel: #F6F8FB; --pm-bg-alt: #F1F5FA; --pm-border: #E3E9F2; --pm-border-strong: #CBD6E5; --pm-border-accent: rgba(13, 90, 158, 0.45); --pm-text: #0F1524; --pm-text-muted: #5D6678; --pm-text-dim: #7A8496; --pm-text-eyebrow-color: #5D6678; --pm-accent: #0D5A9E; /* Signal is too light on white — use Deep */ --pm-accent-text: #0B4C86; /* accent as body-size text: darker still */ --pm-accent-tint: #EAF3FC; --pm-focus: #1E9DFF; /* Signal survives as a 2px focus ring */ --pm-allowed: #0E7C5A; --pm-blocked: #B3261E; --pm-glow: none; /* never glow on white */ --pm-elev: 0 1px 2px rgba(15, 21, 36, 0.06), 0 8px 24px rgba(15, 21, 36, 0.06); --pm-logo-mark-arch: #0D5A9E; --pm-logo-mark-glyph: #1E9DFF; --pm-logo-word: #101828; --pm-logo-word-mail: #0D5A9E; } /* Interaction — themed in both, never browser default */ [data-theme] a { color: var(--pm-accent-text); text-decoration: none; } [data-theme] a:hover { color: var(--pm-accent); } [data-theme] *:focus-visible { outline: 2px solid var(--pm-focus); outline-offset: 2px; } [data-theme] ::selection { background: var(--pm-accent-tint); color: var(--pm-text); } [data-theme] [disabled], [data-theme] .is-disabled { opacity: 0.45; pointer-events: none; }