/* ======================================================================
RECILENS — tokens.css
The contract. Every page links this. No page redefines anything in it.
A literal colour, radius, duration or z-index anywhere outside this file
is a bug — that is the grep GLOBAL VERIFY runs.
====================================================================== */
/* ----------------------------------------------------------------------
FACES — self-hosted. Nothing is fetched from Google or Fontshare at
runtime; those hosts see a visitor's IP on every page load, and a third
party on the render path is a third party that can be slow or gone.
Instrument Serif is the display face and is NOT variable — it ships as
regular and italic. Satoshi is variable, 300–900 in one 42 KB file,
which is smaller than the three static weights it replaces.
---------------------------------------------------------------------- */
@font-face{
font-family:"Instrument Serif";
src:url("/assets/v2/fonts/instrument-serif-regular-latin.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"Instrument Serif";
src:url("/assets/v2/fonts/instrument-serif-regular-latin-ext.woff2") format("woff2");
font-weight:400; font-style:normal; font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"Instrument Serif";
src:url("/assets/v2/fonts/instrument-serif-italic-latin.woff2") format("woff2");
font-weight:400; font-style:italic; font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,
U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
font-family:"Instrument Serif";
src:url("/assets/v2/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
font-weight:400; font-style:italic; font-display:swap;
unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,
U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
font-family:"Satoshi";
src:url("/assets/v2/fonts/satoshi-variable.woff2") format("woff2-variations"),
url("/assets/v2/fonts/satoshi-variable.woff2") format("woff2");
font-weight:300 900; font-style:normal; font-display:swap;
}
/* ----------------------------------------------------------------------
FALLBACK METRICS — measured, not guessed.
`font-display:swap` means the fallback paints first and the real face
replaces it. If the two set text at different widths, everything moves,
and that movement is counted as layout shift.
These percentages were measured by rendering the same string at 100px in
each face and comparing advance width:
Satoshi 1045.8px Arial 1072.9 -> 97.5%
Instrument Serif 786.0px Georgia 1060.3 -> 74.1%
Instrument Serif is far narrower than any system serif, which is why the
override matters most there — untreated, the headline reflows visibly.
---------------------------------------------------------------------- */
@font-face{
font-family:"Satoshi Fallback";
src:local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
size-adjust:97.5%; ascent-override:96%; descent-override:24%; line-gap-override:0%;
}
@font-face{
font-family:"Instrument Fallback";
src:local("Georgia"), local("Times New Roman"), local("Liberation Serif");
size-adjust:74.1%; ascent-override:100%; descent-override:26%; line-gap-override:0%;
}
/* ----------------------------------------------------------------------
COLOUR, SHAPE, TIME, DEPTH
---------------------------------------------------------------------- */
:root{ /* LIGHT — default */
--bg:#FAFAF8; --surface:#FFFFFF; --surface-2:#F5F7FA;
--text:#0B1020; --text-2:#5A6275; --hairline:rgba(11,16,32,.08);
--accent:#1B3BE8; /* the ONLY button colour */
--royal:#C8A45C; /* brass: hairlines, numerals, underlines — NEVER a fill */
--prism-a:#00D9B2; --prism-b:#FF5C39; /* motion only */
--ok:#0E7C55; --warn:#B45309; --err:#B42318;
--on-accent:#FFFFFF; /* text that sits on --accent, in both themes */
color-scheme:light;
}
[data-theme="dark"]{
--bg:#081120; --surface:#101828; --surface-2:#0C1526;
--text:#F5F7FA; --text-2:#94A3B8; --hairline:rgba(245,247,250,.10);
--accent:#0078FF; --royal:#C8A45C;
--prism-a:#00D9FF; --prism-b:#7B61FF;
--on-accent:#FFFFFF;
color-scheme:dark;
}
:root{
--r-sm:4px; --r-md:12px; /* two radii, by hierarchy */
--sp:8px; /* 8-pt grid, no arbitrary values */
--t-xs:120ms; --t-sm:200ms; --t-md:320ms; --t-lg:560ms; --t-xl:900ms;
--ease:cubic-bezier(.2,.8,.2,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
/* The ladder. Any fixed, sticky or portalled element takes its z-index
from here. Local stacking inside a component's own context may use
0–9 and nothing higher. (DECISIONS D10.) */
--z-base:0; --z-sticky:100; --z-nav:200; --z-float:300;
--z-backdrop:400; --z-modal:500; --z-toast:600;
--shadow-1:0 1px 2px rgba(11,16,32,.04);
--shadow-2:0 8px 24px rgba(11,16,32,.06);
--shadow-3:0 24px 64px rgba(11,16,32,.08);
--font-display:"Instrument Serif","Instrument Fallback",Georgia,serif;
--font-body:"Satoshi","Satoshi Fallback",system-ui,-apple-system,"Segoe UI",
Roboto,Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* 1.25 scale, fluid between 390 and 1440 */
--fs-12:clamp(.72rem,.70rem + .10vw,.75rem);
--fs-14:clamp(.82rem,.79rem + .14vw,.875rem);
--fs-16:clamp(.94rem,.90rem + .18vw,1rem);
--fs-20:clamp(1.10rem,1.03rem + .30vw,1.25rem);
--fs-25:clamp(1.28rem,1.16rem + .50vw,1.5625rem);
--fs-31:clamp(1.49rem,1.30rem + .80vw,1.953rem);
--fs-39:clamp(1.73rem,1.43rem + 1.24vw,2.441rem);
--fs-49:clamp(2.01rem,1.55rem + 1.90vw,3.052rem);
--fs-61:clamp(2.33rem,1.64rem + 2.84vw,3.815rem);
--fs-76:clamp(2.71rem,1.69rem + 4.19vw,4.768rem);
--container:1280px;
--gutter:16px;
/* Parallax depths. Translation is capped at 80px total in motion.js
regardless of scroll length — uncapped parallax is what makes a long
page feel broken. */
--depth-far:.08; --depth-mid:.15; --depth-near:.25;
}
@media (min-width:768px){ :root{ --gutter:24px; } }
@media (min-width:1280px){ :root{ --gutter:32px; } }
/* ----------------------------------------------------------------------
BASE
---------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:var(--fs-16);
line-height:1.6;
-webkit-font-smoothing:antialiased;
/* Note what is NOT here: overflow-x:hidden. It hides the symptom and
leaves the overflowing element in place. Find the element. */
}
/* Every grid and flex child. A grid item defaults to min-width:auto, so a
child with an intrinsic size — an , an