/* ==========================================================================
Signal design tokens v0.1.0
--------------------------------------------------------------------------
Dark is the only theme. Signal is designed for a near-black page with a
grey ramp and one accent; there is no light variant and no theme switch.
Do not invert these values; if a light surface is ever needed it is a new
system, not a mode of this one.
Fonts (load once, before signal.css):
or, inside CSS (slower, blocks on this file):
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap");
Every value used by signal.css lives here. Components must never use a raw
hex value; add a token instead.
========================================================================== */
:root {
color-scheme: dark;
/* ---- surfaces: page, wells, raised -------------------------------------- */
--sg-bg: #0A0A0C; /* page background; also the fill of "bare" blocks */
--sg-sunk: #0E0E11; /* wells: consoles, scopes, column bodies, art */
--sg-surface: #121215; /* panels and cards */
--sg-surface-2: #18181C; /* hover / selected row / pressed segment */
--sg-surface-3: #1F1F24; /* small filled chips (the "on" pill in a toggle) */
--sg-topbar-bg: rgba(10, 10, 12, .82); /* sticky bar, with backdrop blur */
--sg-scrim: rgba(5, 5, 7, .62); /* behind modals and the palette */
--sg-scrim-sheet: rgba(0, 0, 0, .55); /* behind a side sheet */
/* ---- hairlines (borders are always 1px) --------------------------------- */
--sg-line: #222228; /* default panel border, row dividers */
--sg-line-2: #2E2E36; /* outline buttons, inputs, inline code border */
--sg-line-3: #3A3A44; /* rules, connectors, hover border, empty bar cells */
/* ---- text ramp ---------------------------------------------------------- */
--sg-text: #F4F4F6; /* primary text, headline numbers 18.0:1 on bg */
--sg-text-2: #A3A3AD; /* secondary text, body copy in panels 7.9:1 on bg */
--sg-text-3: #7C7C86; /* meta, labels, mono captions 4.8:1 on bg */
--sg-text-4: #55555F; /* decorative tier: duplicate timestamps 2.7:1 (!) */
--sg-dim: #4A4A54; /* tree glyphs ├─ └─, empty bar cells 2.3:1 (!) */
--sg-ghost: #26262C; /* "off" cells of the dot matrix and meters 1.3:1 */
--sg-scramble: #55555F; /* glyph noise while a dot matrix decodes */
--sg-art: #4F4F59; /* ASCII art at rest (before it "develops") */
--sg-art-ink: #7D7D87; /* the densest ASCII glyphs at rest */
--sg-art-latent: #2C2C33; /* undeveloped ASCII rows */
/* ---- state colours: the only hues in the system ------------------------- */
--sg-pink: #FF4F9A; /* "you": needs you, primary, focus 6.4:1 on bg */
--sg-pink-hover:#FF6AAA;
--sg-pink-ink: #140810; /* text on a pink button 6.4:1 on pink */
--sg-pink-soft: rgba(255, 79, 154, .10); /* badge fill only */
--sg-pink-edge: rgba(255, 79, 154, .38); /* border of a card that needs you */
--sg-amber: #D9A35B; /* stuck / blocked / failed 8.8:1 on bg */
--sg-amber-soft:rgba(217, 163, 91, .12);
--sg-done: #D4D4DA; /* done / passing / filled cells 13.4:1 on bg */
/* ---- the character field (canvas) --------------------------------------- */
--sg-field-lo: 30, 30, 36; /* rgb of the faintest field glyph */
--sg-field-hi: 118, 118, 130; /* rgb of the brightest field glyph */
/* ---- type families ------------------------------------------------------ */
--sg-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--sg-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
/* braille + block elements: Geist Mono lacks some, so fall through to fonts that carry them */
--sg-glyph: "Geist Mono", ui-monospace, Consolas, "DejaVu Sans Mono", "Segoe UI Symbol", monospace;
/* box drawing (├─ ╭─ ─): one font for every glyph so joints line up */
--sg-box: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
/* ---- type scale (px; body is 15) ---------------------------------------- */
--sg-fs-10: 10px; /* tiny chips inside log rows */
--sg-fs-11: 11px; /* badges, kbd, "sample" chips, thumbnail labels */
--sg-fs-12: 12px; /* mono meta: section numbers, readouts, tags, captions */
--sg-fs-13: 13px; /* small UI text, legends, footers, mono rows */
--sg-fs-14: 14px; /* buttons, tabs, list text, key hints */
--sg-fs-15: 15px; /* body */
--sg-fs-16: 16px; /* lead / prose paragraphs */
--sg-fs-17: 17px; /* stat values, card titles in documents */
--sg-fs-19: 19px; /* the question in a prompt block */
--sg-fs-20: 20px; /* detail panel title, section title on phones */
--sg-fs-22: 22px; /* section title */
--sg-fs-26: 26px; /* inline big number (e.g. 5/10 on a board strip) */
--sg-fs-display: clamp(26px, 2.6vw, 40px); /* the light word under a matrix */
--sg-fw-light: 300; /* display words, "of" between matrices only */
--sg-fw-regular: 400;
--sg-fw-medium: 500; /* titles, buttons, emphasis */
--sg-fw-semibold: 600;/* text on the pink button only */
--sg-lh-tight: 1.2; /* titles */
--sg-lh-ui: 1.35; /* card titles, short labels */
--sg-lh-body: 1.5; /* body */
--sg-lh-prose: 1.6; /* long-form paragraphs */
--sg-lh-log: 1.6; /* console lines */
--sg-ls-title: -.02em; /* section titles, panel titles */
--sg-ls-display: -.03em; /* big numbers, display words */
--sg-ls-mono: -.01em; /* inline mono inside sans */
--sg-measure: 66ch; /* max line length for prose */
/* ---- spacing: 8px grid (4px is the only half-step) ---------------------- */
--sg-sp-4: 4px;
--sg-sp-8: 8px;
--sg-sp-12: 12px;
--sg-sp-16: 16px;
--sg-sp-24: 24px;
--sg-sp-32: 32px;
--sg-sp-40: 40px;
--sg-sp-48: 48px;
--sg-sp-56: 56px;
--sg-sp-72: 72px; /* gap above the first section below a hero */
--sg-sp-96: 96px; /* rhythm between sections */
--sg-sp-120: 120px; /* page bottom padding */
--sg-gutter: 24px; /* page side padding (16px under 900px) */
--sg-wide: 1320px; /* max content width */
--sg-control-h: 40px; /* icon buttons, toggles, inputs */
--sg-control-h-sm: 34px; /* compact controls inside panels */
/* ---- radii --------------------------------------------------------------- */
--sg-r-xs: 4px; /* kbd, toggle state chip */
--sg-r-tag: 5px; /* "sample" / "new" chips */
--sg-r-code: 6px; /* inline code, mini buttons */
--sg-r-sm: 8px; /* rows, menu items, selects */
--sg-r-md: 10px; /* cards, inputs, thumbnails, nodes */
--sg-r: 12px; /* column bodies, lanes */
--sg-r-lg: 16px; /* panels, consoles, overlays */
--sg-r-pill: 999px; /* buttons, badges, chips, the command input */
/* ---- elevation: only overlays cast a shadow ----------------------------- */
--sg-shadow-overlay: 0 18px 50px rgba(0, 0, 0, .55);
--sg-blur-topbar: 14px;
/* ---- z-index layers ------------------------------------------------------ */
--sg-z-field: 0; /* fixed character field canvas */
--sg-z-content: 1; /* main */
--sg-z-sticky: 20; /* top bar */
--sg-z-float: 30; /* corner chips, floating labels */
--sg-z-sheet-scrim: 40;
--sg-z-sheet: 41; /* side sheet (item drawer) */
--sg-z-pop: 45; /* dropdowns, menus, anchored panels */
--sg-z-fx: 60; /* flying characters (stream-into) */
--sg-z-modal-scrim: 69;
--sg-z-modal: 70; /* modal, command palette */
--sg-z-toast: 80;
--sg-z-boot: 100; /* boot overlay */
/* ---- motion --------------------------------------------------------------- */
--sg-ease: cubic-bezier(.2, .7, .2, 1); /* everything that draws or settles */
--sg-ease-sheet: cubic-bezier(.2, .8, .2, 1); /* side sheet slide */
--sg-dur-hover: 150ms; /* colour / border on hover */
--sg-dur-fast: 250ms; /* expand rows, menus */
--sg-dur-fill: 450ms; /* content fades in after its frame draws */
--sg-dur-draw: 700ms; /* a frame border draws itself */
--sg-dur-draw-fast: 340ms; /* overlay borders (controls feel instant) */
--sg-dur-rule: 1200ms; /* section rule fills */
--sg-dur-count: 1100ms; /* numbers count up */
--sg-dur-scramble: 520ms;/* text decode */
--sg-stagger: 90ms; /* between siblings revealed in one batch */
--sg-blink: 1.06s; /* text cursor ▌ */
/* frame rates (JS): field 24fps (14 on phones), scopes 24, flow beads 30,
scramble ~24 (42ms), spinners 10, small meters 8. Never above 30 except
the transform-only stream-into effect, which runs at display rate. */
}
/* breakpoints (CSS custom properties cannot be used in media queries; use these numbers)
1240px board collapses to 3 columns
1080px hero side block narrows, two-column grids stack
900px phone layout: top bar wraps, detail panel becomes a sheet, flows go vertical
520px small phone: readouts wrap under titles, secondary columns drop */
@media (max-width: 900px) {
:root { --sg-gutter: 16px; }
}