/* * telpa docs brand tokens — direction A from the brand pdf. * palette, typography, and shape tokens consumed by `telpa-docs.css`. * fonts are self-hosted from google fonts (inter + jetbrains mono variable woff2, latin subset). * * theming model: * - raw palette swatches (`--telpa-ink`, `--telpa-cream`, `--telpa-teal`) never change. * - semantic tokens (`--bg-page`, `--fg-strong`, `--rule`, etc.) flip between light and dark * mode via `:root[data-theme="dark"]`. portal css and the scalar overrides reference * the semantic tokens so every surface tracks the active mode automatically. * - `docs-theme.js` sets `data-theme` on `` from the persisted operator preference. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/inter-latin.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); } :root { /* ---- raw palette (immutable across themes) ---- */ --telpa-ink: #1F2D36; --telpa-ink-deep: #0E151C; --telpa-cream: #F7F6F2; --telpa-teal: #2A8FA4; --telpa-white: #FFFFFF; /* alpha variants of the raw palette — handy for hairlines, muted text, ghost surfaces */ --telpa-ink-08: rgba(31, 45, 54, 0.08); --telpa-ink-12: rgba(31, 45, 54, 0.12); --telpa-ink-30: rgba(31, 45, 54, 0.30); --telpa-ink-55: rgba(31, 45, 54, 0.55); --telpa-ink-70: rgba(31, 45, 54, 0.70); --telpa-cream-08: rgba(247, 246, 242, 0.08); --telpa-cream-12: rgba(247, 246, 242, 0.12); --telpa-cream-30: rgba(247, 246, 242, 0.30); --telpa-cream-55: rgba(247, 246, 242, 0.55); --telpa-cream-70: rgba(247, 246, 242, 0.70); /* state colors */ --telpa-success: #2A8FA4; --telpa-error: #B3261E; /* typography */ --telpa-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --telpa-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; /* shape (2 px hard radii, hairline borders per brand) */ --telpa-radius: 2px; /* eyebrow / chrome label styling (used by every section marker) */ --telpa-eyebrow-size: 11px; --telpa-eyebrow-tracking: 0.08em; /* ---- semantic tokens — light mode defaults ---- */ --bg-page: var(--telpa-cream); --bg-card: var(--telpa-white); --bg-elevated: var(--telpa-ink-08); --bg-rail: var(--telpa-ink); --bg-rail-panel: rgba(255, 255, 255, 0.03); --fg-strong: var(--telpa-ink); --fg-body: var(--telpa-ink-70); --fg-soft: var(--telpa-ink-55); --fg-faint: var(--telpa-ink-30); --fg-on-rail: var(--telpa-cream); --fg-on-rail-soft: var(--telpa-cream-70); --fg-on-rail-faint: var(--telpa-cream-55); --fg-on-rail-ghost: var(--telpa-cream-30); --fg-on-rail-cta: var(--telpa-cream); --rule: 1px solid var(--telpa-ink-12); --rule-color: var(--telpa-ink-12); --rule-color-strong: var(--telpa-ink-30); --rule-rail: 1px solid var(--telpa-cream-12); --rule-rail-color: var(--telpa-cream-12); --accent: var(--telpa-teal); --accent-contrast: var(--telpa-cream); --button-bg: var(--telpa-ink); --button-fg: var(--telpa-cream); color-scheme: light; } :root[data-theme="dark"] { /* invert the cream/ink mapping for the surface tokens; alpha variants flip in lock-step. */ --bg-page: var(--telpa-ink-deep); --bg-card: var(--telpa-ink); --bg-elevated: rgba(255, 255, 255, 0.06); --bg-rail: #050b11; --bg-rail-panel: rgba(255, 255, 255, 0.04); --fg-strong: var(--telpa-cream); --fg-body: var(--telpa-cream-70); --fg-soft: var(--telpa-cream-55); --fg-faint: var(--telpa-cream-30); --fg-on-rail: var(--telpa-cream); --fg-on-rail-soft: var(--telpa-cream-70); --fg-on-rail-faint: var(--telpa-cream-55); --fg-on-rail-ghost: var(--telpa-cream-30); --fg-on-rail-cta: var(--telpa-cream); --rule: 1px solid var(--telpa-cream-12); --rule-color: var(--telpa-cream-12); --rule-color-strong: var(--telpa-cream-30); --rule-rail: 1px solid var(--telpa-cream-12); --rule-rail-color: var(--telpa-cream-12); --accent: var(--telpa-teal); --accent-contrast: var(--telpa-ink-deep); --button-bg: var(--telpa-teal); --button-fg: var(--telpa-cream); color-scheme: dark; }