/* ================================================================ tokens.css — design tokens for the Oberon clone. SOURCES - Colour tokens: verbatim from `body{...}` in research/_stylesheet.css (inline block 3, the Framer runtime sheet). - Type scale: verbatim from the `.framer-styles-preset-*` rules. - Breakpoints: from the reference's own media queries. WHY THE RAW --token- NAMES ARE KEPT Fragments in research/fragments/**.html carry inline styles like style="background-color: var(--token-42ebc297-...., rgb(230, 88, 0))" Page agents copy those inline styles verbatim. Keeping the original custom-property names means those pasted styles resolve to the correct colour with zero rewriting. The friendly aliases below are for new CSS you write yourself. *** LANDMINE *** Framer's inline `var(--token-…, )` fallbacks in the fragments are STALE. e.g. the orange token falls back to rgb(230, 88, 0) (#E65800) but the real declared value is #ed4f00. Because this file declares every token on :root, the correct value always wins. Never "simplify" an inline style down to its fallback colour. ================================================================ */ :root { /* ---------- Framer colour tokens (verbatim names + values) ---------- */ --token-5c6d233d-1667-4ba0-87ce-8540c600778b: #fff; /* white */ --token-39255c68-bd55-4d11-8c69-9c4cfd25ed18: #fff; /* white (alt) */ --token-2df3c817-b108-48eb-80d1-8df46792142e: #000; /* black */ --token-2d80eb07-17bf-4706-97f4-6321ea62994c: #000; /* black (alt) */ --token-89305206-47f8-4d0f-a35d-fd399c3ec573: #171717; /* ink */ --token-23158d7e-7ff7-4e14-8441-b159428d19bb: #17171799; /* ink @ 60% */ --token-75803f96-5cd7-40ff-a42a-de7bb7dda1aa: #202020; /* graphite */ --token-4ee0dd8d-ace7-47d1-bf57-b3371c767f90: #3d3b3b; /* graphite light */ --token-52fb677c-ff02-43f2-ac3f-f3821b4e5598: #4d4d54; /* slate deep */ --token-4a0423f9-cfa5-4414-8e34-f9dba91e9770: #616060; /* body grey */ --token-5635c8bc-7cd3-42c5-8d13-f7a959e02b25: #9e9e9e; /* mid grey */ --token-42ebc297-0f17-4a23-aa5f-246843da7dce: #ed4f00; /* brand orange */ --token-288844bc-fbc6-40d0-bd92-72c6ee78a896: #e68c55; /* peach */ --token-5407937b-7258-4905-a1e7-427232cda51c: #e68c55f2; /* peach @ 95% */ --token-776822a6-de1b-4270-b94c-f7dbb127f257: #e68c55bf; /* peach @ 75% */ --token-c3a6ad53-0baa-48fc-b38e-3a13e9795318: #f2f0ee; /* cream */ --token-df41efe3-3b06-4aec-a740-43df69c793df: #f3f0f5; /* cream cool */ --token-6d7ec9fc-ff98-48d7-bad3-db9f7f9d57b8: #d2ceca; /* stone */ --token-59e2f381-128b-431e-83bf-d2f9f1b6414f: #d2cecad9; /* stone @ 85% */ --token-acaef848-79b4-43b5-96bd-67c5d9f35c8c: #d2cecabf; /* stone @ 75% */ --token-dab8d7ee-c1e4-452b-a4a5-31600b0bc47d: #d2cecaa6; /* stone @ 65% */ --token-27cb4cf4-e97a-4cdf-9048-ec65dc70d129: #d2ceca66; /* stone @ 40% */ --token-ffe51773-c829-4781-afd0-9643cf5024c0: #cfcecc80; /* stone cool @ 50% */ --token-940c9940-3487-41e7-8610-701f836b5978: #cfc9c5; /* stone 2 */ --token-fa16aa6f-5cf9-4360-83f9-0914a6cbeef5: #c0bab6; /* stone dark */ --token-4e994414-5715-452c-aedf-6b9454fa386f: #c5c2bd; /* stone dark 2 */ --token-bc290302-068a-4abc-b619-bd8298288d64: #cccbc4; /* stone dark 3 */ --token-4c62b2f6-be2b-42fe-8452-c7a943c6ddb0: #dbdbd3; /* stone light */ /* ---------- Friendly aliases (use these in new CSS) ---------- */ --c-white: var(--token-5c6d233d-1667-4ba0-87ce-8540c600778b); --c-black: var(--token-2df3c817-b108-48eb-80d1-8df46792142e); --c-ink: var(--token-89305206-47f8-4d0f-a35d-fd399c3ec573); --c-ink-60: var(--token-23158d7e-7ff7-4e14-8441-b159428d19bb); --c-graphite: var(--token-75803f96-5cd7-40ff-a42a-de7bb7dda1aa); --c-graphite-lt: var(--token-4ee0dd8d-ace7-47d1-bf57-b3371c767f90); --c-slate-deep: var(--token-52fb677c-ff02-43f2-ac3f-f3821b4e5598); --c-body: var(--token-4a0423f9-cfa5-4414-8e34-f9dba91e9770); --c-grey: var(--token-5635c8bc-7cd3-42c5-8d13-f7a959e02b25); --c-orange: var(--token-42ebc297-0f17-4a23-aa5f-246843da7dce); --c-peach: var(--token-288844bc-fbc6-40d0-bd92-72c6ee78a896); --c-peach-95: var(--token-5407937b-7258-4905-a1e7-427232cda51c); --c-peach-75: var(--token-776822a6-de1b-4270-b94c-f7dbb127f257); --c-cream: var(--token-c3a6ad53-0baa-48fc-b38e-3a13e9795318); --c-cream-cool: var(--token-df41efe3-3b06-4aec-a740-43df69c793df); --c-stone: var(--token-6d7ec9fc-ff98-48d7-bad3-db9f7f9d57b8); --c-stone-85: var(--token-59e2f381-128b-431e-83bf-d2f9f1b6414f); --c-stone-75: var(--token-acaef848-79b4-43b5-96bd-67c5d9f35c8c); --c-stone-65: var(--token-dab8d7ee-c1e4-452b-a4a5-31600b0bc47d); --c-stone-40: var(--token-27cb4cf4-e97a-4cdf-9048-ec65dc70d129); --c-stone-cool-50:var(--token-ffe51773-c829-4781-afd0-9643cf5024c0); --c-stone-2: var(--token-940c9940-3487-41e7-8610-701f836b5978); --c-stone-dark: var(--token-fa16aa6f-5cf9-4360-83f9-0914a6cbeef5); --c-stone-dark-2: var(--token-4e994414-5715-452c-aedf-6b9454fa386f); --c-stone-dark-3: var(--token-bc290302-068a-4abc-b619-bd8298288d64); --c-stone-light: var(--token-4c62b2f6-be2b-42fe-8452-c7a943c6ddb0); /* Hairline colour used by the "Vert line" dividers all over the site. Comes from each element's inline --border-color; the two that recur are --c-stone (#d2ceca) and rgb(34, 34, 34) on dark surfaces. */ --c-hairline: var(--c-stone); --c-hairline-dark: rgb(34, 34, 34); /* ---------- Font stacks ---------- */ /* Exactly the stacks the reference emits. "Inter Placeholder" is the metric-matched local(Arial) face declared in fonts.css. */ --font-sans: "Inter", "Inter Placeholder", sans-serif; --font-mono: "Geist Mono", monospace; /* The logo wordmark. The reference names Archivo SemiExpanded but ships no @font-face for it, so it renders as the generic sans-serif. Reproduced verbatim so we render identically. DO NOT "fix" this by loading Archivo. */ --font-logo: "Archivo SemiExpanded", "Archivo SemiExpanded Placeholder", sans-serif; /* ---------- Type scale (from .framer-styles-preset-* rules) ---------- Each preset has ONE value at ≥1440, and per-breakpoint overrides only where the reference declares them (see the media blocks below). Preset id → variable map is in SHARED-NOTES.md. */ /* h1 — preset gdgflz */ --t-h1-size: 75px; --t-h1-lh: 96%; --t-h1-ls: -.05em; --t-h1-weight: 500; /* h2 — preset d31zpa */ --t-h2-size: 48px; --t-h2-lh: 100%; --t-h2-ls: -.05em; --t-h2-weight: 500; /* display (big paragraph headline) — preset 1z0m8i6 */ --t-display-size: 68px; --t-display-lh: 100%; --t-display-ls: -.05em; --t-display-weight: 500; /* h2 on dark — preset 1gzf2l2 (no breakpoint overrides) */ --t-h2-invert-size: 42px; /* uppercase heading — preset 1hvrwf (no breakpoint overrides) */ --t-h3-caps-size: 48px; /* large mono on dark — preset 1l4ftx4 (no breakpoint overrides) */ --t-mono-lg-size: 26px; /* mono label — presets w45aii (p) and y9h0vp (h3); identical values */ --t-mono-size: 15px; --t-mono-lh: 135%; --t-mono-ls: 0em; --t-mono-weight: 500; /* small mono — preset ggktaj */ --t-mono-xs-size: 12px; --t-mono-xs-lh: 160%; --t-mono-xs-ls: -.01em; /* body — preset m7rzfv */ --t-body-size: 18px; --t-body-lh: 140%; --t-body-ls: -.03em; --t-body-weight: 500; /* small body — preset lvbtmg */ --t-body-sm-size: 16px; --t-body-sm-lh: 140%; --t-body-sm-ls: -.03em; --t-body-sm-weight: 400; /* ---------- Layout ---------- */ --page-max: 1520px; /* .framer-14w3vrv max-width */ --page-pad-desktop: 32px; /* menu-line horizontal inset, ≥810px */ --page-pad-phone: 26px; /* menu-line horizontal inset, ≤809.98px */ --menu-top: 13px; /* fixed offset of the menu-line container */ --menu-h: 45px; /* measured menu-line height, all bps */ /* Corners: the reference is fully square. Kept as a token so section CSS never invents a radius. */ --radius: 0px; /* ---------- Motion (see js/main.js + SHARED-NOTES.md) ---------- */ /* preset "slide-x": spring{bounce:0, duration:.6, delay:0} */ --ease-spring0: cubic-bezier(0.33, 1, 0.68, 1); --dur-slide-x: 600ms; --delay-slide-x: 0ms; /* preset "rise": spring{stiffness:219, damping:27, mass:.3, delay:.5} -> overdamped, 5τ ≈ 550ms. Phone override below. */ --ease-rise: cubic-bezier(0.25, 0.46, 0.20, 1); --dur-rise: 550ms; --delay-rise: 500ms; --rise-y: 20px; /* preset "zoom": tween{duration:1.1, ease:[.16,.33,.3,1.01], delay:.2} — the reference's own cubic-bezier, used exactly. */ --ease-zoom: cubic-bezier(0.16, 0.33, 0.3, 1.01); --dur-zoom: 1100ms; --delay-zoom: 200ms; /* Framer runtime shims that fragment-copied CSS may reference. */ --framer-aspect-ratio-supported: auto; } /* Framer emits these two exactly; reproduce so copied rules behave. */ @supports not (overflow: clip) { :root { --overflow-clip-fallback: hidden; } } @supports (aspect-ratio: 1) { :root { --framer-aspect-ratio-supported: auto; } } /* ---------- Type scale, per breakpoint ---------- The reference uses THESE query bounds for its type scale (note they are NOT the same bounds as the layout variants — see SHARED-NOTES.md). */ /* laptop */ @media (max-width: 1439px) and (min-width: 1200px) { :root { --t-h1-size: 62px; --t-h1-lh: 100%; --t-h2-size: 42px; --t-display-size: 58px; } } /* tablet */ @media (max-width: 1199px) and (min-width: 810px) { :root { --t-h1-size: 58px; --t-h1-lh: 96%; --t-h2-size: 36px; --t-display-size: 52px; } } /* phone */ @media (max-width: 809px) { :root { --t-h1-size: 42px; --t-h1-lh: 100%; --t-h2-size: 32px; --t-display-size: 35px; /* rise preset, phone override: y 50, spring{stiffness:180,damping:47, mass:1, delay:.7} -> 5τ ≈ 1190ms */ --dur-rise: 1190ms; --delay-rise: 700ms; --rise-y: 50px; } }