/* Satelle design tokens — IMPORTED from the canonical Satelle Design System (Claude Design project 87655a87-b189-4319-9d63-6d2f1bed5ea9, https://claude.ai/design/p/87655a87-b189-4319-9d63-6d2f1bed5ea9), tokens/ {fonts,colors,typography,layout,base}.css, imported 2026-07-03 (sty_bc2eccf9; layout.css — content-width tokens — ADDED + imported 2026-07-03, sty_9249b5c3; base.css heading top-reset — imported 2026-07-03, sty_31faecda). This is the ONE token layer both surfaces load FIRST — the landing/docs pages (css/styles.css) and the app pages (app.css) style components on top of it and declare no palette of their own. The spec prose rides in .satelle/documents/satelle-design-system.md. */ /* Space Grotesk (variable wght 300–700, latin subset) — the only webfont. Self-hosted (embedded in the Go binary); no italic cut ships, emphasised text renders as synthesised oblique. */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Color tokens. Default theme is LIGHT; the dark palette overrides on [data-theme="dark"] (set on before first paint by theme.js). */ :root { /* Core palette */ --ink: #16181d; /* primary text */ --muted: #6b7280; /* secondary text, meta lines */ --line: #e5e7eb; /* hairline borders */ --bg: #fbfbfa; /* page background (warm off-white) */ --panel: #ffffff; /* cards, code blocks, inputs */ --chip: #f0f1ef; /* chip / hover-chip fill */ --accent: #2f6f4f; /* THE satelle green — links, mark, primary actions */ --row-hover: #f6f7f6; /* table row hover */ --expand-bg: #fafbfc; /* inline-expansion background */ /* Terminal-cast hues (Claude Code idiom on the homepage) */ --cc-orange: #c2410c; /* Claude chrome (⏺, spinner) */ --cast-red: #c0392b; /* reviewer reject in the cast */ /* Semantic aliases */ --text-body: var(--ink); --text-muted: var(--muted); --surface-page: var(--bg); --surface-card: var(--panel); --border-default: var(--line); --link: var(--accent); /* Review lights + timeline outcome dots (theme-independent) */ --light-pass: #2ecc71; --light-fail: #e74c3c; --light-fired: #4a6fa5; --light-current: #f1c40f; /* Workflow status badge hues (--badge-c per status) */ --status-backlog: #2ecc71; --status-open: #6366f1; --status-in-progress: #e0a200; --status-integration: #4a6fa5; --status-commit: #8b5cf6; --status-push: #0ea5a4; --status-committed: #2563eb; --status-done: #16a34a; --status-blocked: #e74c3c; --status-cancelled: #b08aa6; /* Conversion-pipeline badges (satelle-server) */ --pipe-running: #6a9fb5; --pipe-pending: #b9863f; --pipe-failed: #b04a4a; /* key:value tag-chip namespaces */ --kv-default: #6a9fb5; /* blue-grey namespace */ --kv-category: #b9863f; /* category: amber */ } [data-theme="dark"] { --ink: #e6e8eb; --muted: #9aa1ab; --line: #2a2d34; --bg: #0e1013; --panel: #16191e; --chip: #1b1e23; --accent: #5fae86; --row-hover: #1a1d22; --expand-bg: #121418; --cc-orange: #e0855f; --cast-red: #e06c6c; } /* Typography tokens. One face for everything (Space Grotesk), monospace only on "machine" surfaces: ids, meta lines, breadcrumbs, terminal, badges, command blocks. */ :root { --display: "Space Grotesk", "Trebuchet MS", "Segoe UI", sans-serif; --font-body: var(--display); --mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale */ --text-base: 15px; /* body font-size (site: /1.6, app: /1.5) */ --text-hero: 3rem; /* site hero h1 (home: clamp(2.1rem,4.4vw,3.1rem)) */ --text-section: 1.7rem; /* .section-title, weight 300 */ --text-tagline: 1.35rem; --text-lede: 1.08rem; --text-app-h1: 22px; /* app header h1 */ --text-meta: 12.5px; /* mono meta lines */ --text-th: 11px; /* table headers, uppercase */ --text-chip: 10.5px; /* tag chips */ --text-badge: 11px; /* status badges, uppercase */ --text-terminal: 0.82rem; /* terminal cast, mono */ /* Tracking: headings are tight; th/badges spread */ --tracking-heading: -0.01em; --tracking-display: -0.02em; --tracking-th: 0.06em; --tracking-badge: 0.04em; /* Control sizing */ --control-height: 2.2rem; } /* Layout tokens — the ONE content-width standard for every page container, from tokens/layout.css in the design system (sty_9249b5c3). Site main / .site-footer and app .wrap all consume these; prose columns cap their own line length (.doc-body 75ch) and are NOT layout tokens. Theme-independent. */ :root { --content-width: 80%; /* fluid page-container width */ --content-max: 1600px; /* ultrawide cap — content stays centred */ } /* Base element reset — from the design system's base.css, which zeroes heading margins so layout spacing comes from container padding, not UA defaults. Applied here as the top-only slice (sty_31faecda): the leading content block of every site page sits flush to main's 3.5rem top padding — a uniform content-to-navbar distance matching the landing — while site h1→lede gaps keep their bottom margin. (The app surface already zeroes heading margins in app.css.) */ h1 { margin-top: 0; }