/* ========================================================================== Phospho — design tokens ========================================================================== Source of truth for the web identity. Every chromatic value below is taken from the shipped mark (assets/phospho.svg / assets/icon/phospho-appicon-small.svg) — see docs/brand.md for the palette story and usage rules. The one idea: the interface is a dark room. Surfaces come from the icon's background radial; text is the monitor bezel's off-white; chromatic color is treated as EMITTED LIGHT — confined to the mark's glow and one phosphor-teal accent — never as paint. Dark-first: :root IS the dark theme, and the page does NOT follow the OS scheme — the dark room is the identity. The light palette below is kept for surfaces that explicitly opt in via :root[data-color-scheme="light"]; no shipped page sets it. (It was OS-bound via prefers-color-scheme until 2026-08-13: the landing page's canvas/glass layers are fixed-dark, so light-flipped ink over them was unreadable.) Contrast: every -text-* and functional token holds >= 4.5:1 (WCAG AA body text) against EVERY surface step of its scheme. Ratios verified 2026-06-05; the worst-case pairing is noted per token. Re-verify if you touch a value. Compliance (docs/compliance-hue-trademark.md): never introduce Philips blue (#0066B2 / corporate cyan-azure family) anywhere. --glow-blue, --glow-violet and --glow-indigo are MARK-ONLY — they exist so derivative artwork can match the icon, not for UI. Do not build UI gradients from the glow set. ========================================================================== */ :root { /* ---- Surfaces — the dark room -------------------------------------- */ /* Steps taken from the mark: the icon's background radial is #232748 -> #161732 -> #06060f; #0c0d1f is the monitor's screen scrim. */ --surface-void: #06060f; /* "Void" — deepest; page edges, hero backdrop */ --surface-base: #0c0d1f; /* "Screen" — default page background */ --surface-raised: #161732; /* "Midnight" — cards, panels */ --surface-high: #232748; /* "Afterglow" — hover states, highest chrome */ /* ---- Text — the bezel scale ----------------------------------------- */ --text-primary: #eef1f6; /* "Bezel white" — the monitor bezel color (12.8:1 on -high) */ --text-secondary: #b6bdd6; /* supporting copy (7.7:1 on -high) */ --text-muted: #8a92b2; /* captions, metadata (4.7:1 on -high) */ /* ---- Accent — phosphor teal ----------------------------------------- */ /* The g0 glow radial in the mark. The ONE interactive color: links, buttons, focus rings. Call it teal or phosphor green in prose — never cyan (trademark-distance, see brand.md). */ --accent: #19e0c8; /* 8.6:1 on -high — fine as text on any surface */ --accent-contrast: #06060f; /* text/icons ON an --accent fill (12.1:1) */ --accent-glow: 0 0 24px rgba(25, 224, 200, 0.35); /* box-shadow halo; decorative only */ /* ---- Secondary accent — magenta bloom ------------------------------- */ /* The g3 glow radial. Sparing: badges, marketing highlights. Safe as text on any dark surface (4.8:1 on -high). */ --accent-warm: #ff45c8; /* ---- Mark-only glow set (do NOT use in UI) -------------------------- */ --glow-teal: #19e0c8; /* g0 — same as --accent */ --glow-blue: #3a7bff; /* g1 — MARK-ONLY (closest to the forbidden blue family) */ --glow-violet: #9b54ff; /* g2 — MARK-ONLY */ --glow-magenta: #ff45c8; /* g3 — same as --accent-warm */ --glow-indigo: #7a5cff; /* g4 — MARK-ONLY */ /* ---- Functional pair ------------------------------------------------- */ /* Kin to macOS dark-mode system colors; danger lifted from systemRed so it still clears 4.5:1 on --surface-high. */ --success: #32d74b; /* 7.5:1 on -high */ --danger: #ff6b5e; /* 5.2:1 on -high */ /* ---- Borders / lines ------------------------------------------------- */ --border-subtle: rgba(238, 241, 246, 0.08); /* hairlines on dark */ --border-strong: rgba(238, 241, 246, 0.18); /* input edges, dividers */ /* ---- Typography ------------------------------------------------------ */ /* System stack, no webfonts — native-Mac honesty, zero payload. The script "Phospho" inside the icon is icon ARTWORK (Cookie), never UI type. */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Wordmark: "Phospho" in the system display face — see brand.md §4 */ --wordmark-weight: 600; /* semibold */ --wordmark-tracking: -0.02em; /* tight; never wide-tracked, never all-caps */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Type scale (17px body — comfortable for long-form on the site) */ --text-xs: 0.8125rem; /* 13px — footnotes, legal */ --text-sm: 0.875rem; /* 14px — captions, metadata */ --text-base: 1.0625rem; /* 17px — body */ --text-lg: 1.3125rem; /* 21px — lead paragraphs */ --text-xl: 1.75rem; /* 28px — section headings */ --text-2xl: 2.5rem; /* 40px — page titles */ --text-hero: 3.5rem; /* 56px — hero (clamp() down on small viewports) */ --leading-tight: 1.15; /* headings */ --leading-normal: 1.55; /* body */ /* ---- Spacing (4px base) ---------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ---- Radii ------------------------------------------------------------ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; --radius-mark: 22.5%; /* the icon's own corner ratio (230/1024) — for mark containers only */ color-scheme: dark; } /* ========================================================================== Light palette — EXPLICIT OPT-IN ONLY (:root[data-color-scheme="light"]) ========================================================================== The room with the lights up: indigo-tinted neutrals (same hue family as the dark surfaces), bezel-dark ink, the same phosphor-teal accent deepened for contrast. The glow set does not change — it is mark-only and the mark carries its own dark background everywhere. The scale keeps the dark scheme's semantics: four distinct steps, elevation gets lighter (void recessed -> high lifted). All text + functional tokens hold >= 4.5:1 against every light surface (worst case: --surface-void #e7eaf3, the darkest step). ========================================================================== */ :root[data-color-scheme="light"] { --surface-void: #e7eaf3; /* recessed wells, page edges */ --surface-base: #f2f4fa; /* default page background */ --surface-raised: #fafbfe; /* cards, panels */ --surface-high: #ffffff; /* hover states, highest chrome */ --text-primary: #14162b; /* bezel-dark ink (14.8:1 on -void) */ --text-secondary: #3f4566; /* (7.8:1 on -void) */ --text-muted: #565d7c; /* (5.4:1 on -void) */ --accent: #0a6f60; /* phosphor teal, deepened (5.1:1 on -void) */ --accent-contrast: #ffffff; --accent-glow: 0 0 24px rgba(25, 224, 200, 0.25); --accent-warm: #b81e8c; /* magenta bloom, deepened (4.9:1 on -void) */ --success: #1c6e31; /* 5.3:1 on -void */ --danger: #c8000f; /* 5.0:1 on -void */ --border-subtle: rgba(20, 22, 43, 0.08); --border-strong: rgba(20, 22, 43, 0.20); }