/* 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; color-scheme + native option colours ADDED 2026-08-18, sty_2f185f3d). 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 { /* Native UA chrome — popups, the select menu, scrollbars, focus rings — is painted by the OS, not by our rules, unless we tell it which scheme we are in. Declared HERE (the one token layer both surfaces link first) so every select on the app and the site follows the theme; never per-control. */ color-scheme: light; /* 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"] { color-scheme: 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, using a MAX-WIDTH model (from tokens/layout.css in the design system, ui_kits/site/SiteApp.jsx; --gutter-mobile added 2026-07-10 sty_9931dfc6; the proportional 80% width token REMOVED + max-width model imported 2026-07-11, sty_8a8d7ace). Each container is `width: 100%; max-width: var(--content-max); margin: 0 auto` with its own padding — so on narrow/tablet screens content is full-width minus that padding (a slim gutter aligned with the full-bleed header), and margins only appear once the viewport exceeds the cap, where content centres. Site main / .site-footer and app .wrap all consume --content-max; prose columns cap their own line length (.doc-body 75ch) and are NOT layout tokens. Theme-independent. The mobile breakpoint is 640px — a documented CONSTANT written verbatim in every @media rule (CSS custom properties cannot be evaluated inside a @media condition). */ :root { --content-max: 1600px; /* ultrawide cap — content stays centred above it */ --gutter-mobile: 1rem; /* ≤640px page/container horizontal padding */ } /* 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; } /* Native select popups: the option list takes the panel/ink tokens on the engines that honour them (Chromium on Windows/Linux, Firefox). On macOS the list is drawn by the OS and ignores these — there `color-scheme` above is what makes it follow the theme. Both together, globally, is the whole contract: no custom listbox widget anywhere in the app. */ option, optgroup { background-color: var(--panel); color: var(--ink); }