/* Torusframe design tokens. * * One file, three sites. Everything shared lives here; a site may only add an * accent and its own layout. If a value is needed by two sites, it belongs in * this file rather than being copied. * * The direction is restraint. No glows, no gradients on text, no decorative * motion. Colour comes from product screenshots, not from chrome. Sophistication * here is a function of spacing, type, and consistency. * * PLACEHOLDER: values are a working starting point, not a finished system. */ :root { /* Ground. Near-black with a slight cool cast so screenshots do not float on pure #000, which reads as cheap on OLED displays. */ --bg: #0b0d11; --bg-raised: #12151b; --bg-sunken: #080a0d; /* Text. Four steps is enough; more invites inconsistency. */ --text: #e7eaee; --text-muted: #a2abb8; --text-subtle: #6f7885; --text-inverse: #0b0d11; --border: #1e232c; --border-strong: #2b323d; /* Accent is set per site in its own stylesheet. These are the fallbacks. */ --accent: #7c8899; --accent-text: #0b0d11; --accent-quiet: rgba(124, 136, 153, 0.14); --danger: #e05252; --warning: #d99a34; --success: #46a758; /* Type. System stacks keep the sites fast and native-feeling; a webfont can replace --font-sans later without touching any layout. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; --text-xs: 0.78rem; --text-sm: 0.88rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.45rem; --text-2xl: 1.95rem; --text-3xl: 2.6rem; --text-4xl: 3.4rem; --leading-tight: 1.15; --leading-normal: 1.6; /* Spacing. A single scale, used everywhere, is most of what makes unrelated pages look like one family. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px; --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --container: 1080px; --container-narrow: 720px; --transition: 150ms ease; } /* Per-product accents. Each site sets one of these on . The hues are deliberately close in weight so the three sites read as siblings rather than as three different companies. */ .accent-torusframe { --accent: #8b7bf0; --accent-text: #0b0d11; --accent-quiet: rgba(139, 123, 240, 0.14); } .accent-trace { --accent: #4bc8d4; --accent-text: #08181a; --accent-quiet: rgba(75, 200, 212, 0.14); } .accent-orbit { --accent: #5b9cf5; --accent-text: #06121f; --accent-quiet: rgba(91, 156, 245, 0.14); } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }