/* ========================================================================== Tokens: the single source for color, type, space and motion. style.css and system/index.html both read from here; components only ever use the semantic tokens (--canvas, --text, --accent…), never raw values. Tweak live in system/index.html, then use "Copy tokens.css" there and paste it over this file. ========================================================================== */ /* ---------- Palette ---------- Raw colors, named after NASA's launch entry suit (the "pumpkin suit"): international orange fabric against a studio-blue backdrop, a blue-black helmet, a white liner. Sampled from the Wikimedia photo (system/launch-entry-suit.webp). Nothing outside this file should use these directly. */ :root { --suit-orange: #ff4f00; /* international orange (aerospace) */ --suit-orange-shade: #bd380c; /* the fabric in its lit folds */ --helmet: #07090e; /* helmet and boots: a blue-black */ --backdrop-deep: #1f4f87; /* studio backdrop, floor */ --backdrop-light: #699abf; /* studio backdrop, where the light hits */ --liner: #ecebe6; /* helmet liner and visor white */ } /* ---------- Semantic color ---------- Night is the default. Day overrides the same tokens. The theme comes from the system unless the visitor picks one with the toggle (data-theme on , set before first paint). Contrast ratios are against --canvas. The selectors also work on any element, so system/index.html can show both themes side by side. */ :root, [data-theme="dark"] { --canvas: #0b0d11; /* a shade off the helmet */ --surface: #12151b; /* cards, popovers, buttons */ --surface-hover: #171b22; --line: #232833; /* hairlines, decoration only (1.3:1) */ --text: var(--liner); /* 16.3:1 */ --muted: #9ba1ab; /* 7.5:1, descriptions, labels, tags */ --faint: #7c838e; /* 5.1:1, metadata; the lowest step for text */ --accent: var(--suit-orange); /* 5.9:1, pixel details and small highlights */ --accent-ink: var(--suit-orange); /* orange that has to pass as text */ --on-accent: var(--helmet); /* text on an orange fill (5.9:1) */ --blue: var(--backdrop-light); /* 6.5:1, a cool supporting color, used sparingly */ --ring: rgb(255 255 255 / 0.06); --ring-hover: rgb(255 255 255 / 0.1); --shadow-card: 0 1px 2px -1px rgb(0 0 0 / 0.5), 0 2px 4px 0 rgb(0 0 0 / 0.3); --shadow-card-hover: 0 2px 4px -1px rgb(0 0 0 / 0.6), 0 6px 12px -2px rgb(0 0 0 / 0.4); --shadow-pop: 0 8px 24px -8px rgb(0 0 0 / 0.6); color-scheme: dark; } [data-theme="light"] { --canvas: #f2f4f7; --surface: #ffffff; --surface-hover: #f8f9fb; --line: #dde1e7; --text: #0b0d11; /* 17.7:1 */ --muted: #535a66; /* 6.3:1 */ --faint: #646b77; /* 4.9:1 */ --accent: var(--suit-orange); /* 3.0:1: fills, pixels and large type only */ --accent-ink: var(--suit-orange-shade); /* 5.1:1, orange for text */ --on-accent: var(--helmet); --blue: var(--backdrop-deep); /* 7.5:1 */ --ring: rgb(0 0 0 / 0.07); --ring-hover: rgb(0 0 0 / 0.12); --shadow-card: 0 1px 2px -1px rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04); --shadow-card-hover: 0 2px 4px -1px rgb(0 0 0 / 0.08), 0 6px 12px -2px rgb(0 0 0 / 0.06); --shadow-pop: 0 8px 24px -8px rgb(0 0 0 / 0.15); color-scheme: light; } /* ---------- Type ---------- Geist for everything, Newsreader italic for emphasis and section labels, Redaction 50 Italic for the name and company names, Redaction 70 for "Coming soon". (Redaction's numbered cuts are bitmap-degraded; higher numbers are rougher.) */ @font-face { font-family: "Redaction 50"; src: url("fonts/Redaction50-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Redaction 70"; src: url("fonts/Redaction70-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { --font-sans: "Geist", system-ui, sans-serif; --font-serif: "Newsreader", Georgia, serif; --font-display: "Redaction 50", "Newsreader", Georgia, serif; --font-pixel: "Redaction 70", "Newsreader", Georgia, serif; --tracking: -0.004em; --size-body: 15px; --leading: 26px; --size-small: 13px; --leading-small: 20px; --size-tag: 11px; --size-display: 24px; /* the name; 24px counts as large text, so suit orange passes (3:1) in day mode */ --size-display-l: 26px; /* "Coming soon" */ --size-heading: 20px; /* company names, always smaller than the name */ --italic-boost: 1.12; /* Newsreader italic runs small next to a grotesk */ } /* ---------- Space, layout, motion ---------- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --column: 34rem; --radius-pill: 999px; --radius-card: 14px; --radius-card-inner: 11px; --radius-icon: 10px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 150ms; --duration: 200ms; }