/* ========================================================================= ORIGINAL LIMITED — THEME LAYER 1: TOKENS ========================================================================= Loaded AFTER styles.css and components.css. Everything here is additive: it defines new custom properties and never redefines an existing one, so it is safe to load against the current site without touching a single page. WHY THIS FILE EXISTS The site carried 32 custom properties, all of them literals -- there was no scale. Changing the gold meant editing every rule that referenced it. This layer adds the missing scale in front of those values, so var(--color-gold) resolves through the scale to the same --gold literal the existing 500-odd rules already use. Change the scale once, the whole site moves. THE LAYER ORDER 1 tokens this file -- what things are 2 primitives primitives.css -- what shapes things are made of 3 components components.css -- the site's existing vocabulary 4 sections sections/ -- composed sections, added over time Components may read tokens. Tokens must never read components. ========================================================================= */ /* ---- 1. PRIMITIVES: unopinionated values ------------------------------ */ :root { /* Palette -- named by role, not by hue, so a rebrand is a one-file edit. Each resolves to the site's existing literal. Nothing here changes what the site looks like today. */ --c-ink: #101820; /* primary text on light */ --c-ink-muted: #55606d; --c-carbon: #101820; /* primary surface, dark */ --c-carbon-deep:#080c11; /* deepest surface */ --c-carbon-lift:#17202b; /* raised on dark */ --c-paper: #f5f3ee; /* light surface */ --c-white: #ffffff; --c-gold: #ffb612; /* the accent. Used sparingly and only where it means something: a figure, a verdict, a tag. */ --c-gold-bright:#ffc63a; --c-gold-deep: #e09a00; --c-gold-ink: #7a5200; /* gold that must sit on a light surface */ /* Text, by surface. Never pick a text colour from the palette directly -- pick the pair, so contrast is decided once and cannot drift. */ --t-on-light: rgba(16, 24, 32, 0.94); --t-on-light-dim: rgba(16, 24, 32, 0.74); --t-on-dark: rgba(255, 255, 255, 0.94); --t-on-dark-dim: rgba(255, 255, 255, 0.58); --t-on-dark-faint: rgba(255, 255, 255, 0.46); /* Rules -- hairlines are 1px, always. The craft floor bans side accents above 1px, and a 3px rule belongs to a section divider, not a cell. */ --rule-1: 1px; --rule-on-light: rgba(16, 24, 32, 0.14); --rule-on-dark: rgba(255, 255, 255, 0.14); --rule-gold: rgba(255, 182, 18, 0.34); /* Type families */ --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-heading: "Reeler", var(--font-display); --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale -- a 1.25 modular scale off a 16px base. Every step is a clamp() so it holds from 320px to 6K without a breakpoint ladder. */ --fs-micro: .69rem; --fs-small: .82rem; --fs-body: .97rem; --fs-lead: 1.06rem; --fs-h4: 1.16rem; --fs-h3: 1.42rem; --fs-h2: 1.9rem; --fs-h1: clamp(2.1rem, 4.4vw, 3.4rem); --fs-display: clamp(2.6rem, 7vw, 5.4rem); /* craft floor caps display at 6rem */ --fs-figure: clamp(1.6rem, 3vw, 2.6rem); /* Tracking -- floor is -0.04em. -0.02 to -0.03 reads best. */ --track-tight: -0.03em; --track-snug: -0.02em; --track-flat: -0.01em; --track-wide: .13em; /* the mono tag treatment */ /* Leading */ --lead-tight: 1.06; --lead-snug: 1.16; --lead-normal: 1.5; --lead-loose: 1.66; /* Space scale -- 4px base. Sections breathe; tight groups stay tight. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 22px; --s-6: 30px; --s-7: 44px; --s-8: 64px; --s-9: 96px; --gutter: clamp(20px, 5vw, 96px); --measure: 66ch; /* body copy sits between 65 and 75ch */ --measure-tight: 52ch; /* Radii -- cards stay 12-16px. Pills are for small controls only. */ --r-sm: 4px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; /* Motion -- one easing curve, four speeds. Exponential ease-out from an already-visible default; nothing animates in from opacity 0 on every section. */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 180ms; --dur-med: 280ms; --dur-slow: 700ms; /* Depth -- elevation is declared ONCE, as a border or a shadow, never both. A 1px border under a wide soft shadow is the ghost card. */ --elev-flat: none; --elev-1: 0 1px 2px rgba(0, 0, 0, .16), 0 8px 24px rgba(0, 0, 0, .18); --elev-2: 0 2px 4px rgba(0, 0, 0, .18), 0 18px 44px rgba(0, 0, 0, .26); } /* ---- 2. SEMANTIC ALIASES: what a token is FOR -------------------------- These are the names sections should use. A section never says "rgba(255,255,255,.58)"; it says --text-on-dark-dim, and the surface decides. This is the layer that makes a rebrand one file. */ :root { --surface-dark: var(--c-carbon); --surface-darker: var(--c-carbon-deep); --surface-light: var(--c-paper); --surface-raised: var(--c-carbon-lift); --text-strong: var(--t-on-light); --text-body: var(--t-on-light-dim); --text-inverse: var(--t-on-dark); --text-inverse-dim: var(--t-on-dark-dim); --text-accent: var(--c-gold-ink); /* on light */ --text-accent-inv: var(--c-gold); /* on dark */ --divider: var(--rule-on-light); --divider-inverse:var(--rule-on-dark); --accent: var(--c-gold); } /* A tone set on an ancestor flips every semantic token beneath it. That is how one component works on both a light and a dark section without a modifier class per surface. This is the single most useful idea in the layer. */ [data-tone="dark"], .surface-dark { --text-strong: var(--t-on-dark); --text-body: var(--t-on-dark-dim); --text-accent: var(--c-gold); --divider: var(--rule-on-dark); --surface-1: var(--c-carbon); --surface-2: var(--c-carbon-lift); } [data-tone="light"], .surface-light { --text-strong: var(--t-on-light); --text-body: var(--t-on-light-dim); --text-accent: var(--c-gold-ink); --divider: var(--rule-on-light); --surface-1: var(--c-paper); --surface-2: var(--c-white); } /* ========================================================================= SPACING SCALE ------------------------------------------------------------------------- There was no scale. Two tokens carried every value on the site (--gutter and --section-air), so each component re-derived its own padding inline -- .button at 0.9em 1.5em, .robots-btn at 0.9em 1.6em, .bento-card at clamp(22px,2.6vw,38px), .bento itself at gap:1px. That is why the buttons did not match each other. A 4px base with named steps. Every layout gap, card padding and stack rhythm resolves to one of these, so spacing is comparable across sections instead of being re-guessed per component. The steps are deliberately not a strict doubling scale: 4/8/12/16/24/32/ 48/64/96. Large steps move in bigger jumps because the gap between "space around a group" and "space between sections" is a qualitative change, not a doubling. ========================================================================= */ :root { --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Layout gaps. Grid cells sit on --gap-cell; card interiors on --pad-card. */ --gap-cell: clamp(12px, 1.5vw, 20px); --pad-card: clamp(20px, 2.4vw, 34px); /* ========================================================================= BUTTON TOKENS ------------------------------------------------------------------------- One definition for every button on the site. These were duplicated across .button and .robots-btn, which had drifted to different heights, paddings, sizes, weights and tracking -- the visible cause of buttons not matching each other. Anything that looks like a button now resolves to these. ========================================================================= */ --btn-h: 54px; --btn-pad-y: 0.9em; --btn-pad-x: 1.5em; --btn-radius: var(--pill); --btn-size: 0.9rem; --btn-wght: 750; --btn-wdth: 88; --btn-track: 0.01em; --btn-gap: 0.7em; } .css-parse-sentinel { --css-parse-sentinel: 1; }