/* ==========================================================================
EMS-TRADE · design-tokens.css
FROZEN — DO NOT EDIT WITHOUT THE CLIENT'S SIGN-OFF.
Provenance: lifted verbatim from the `:root` block of the approved design
`source/style-cards/card-5.html` ("Card 5 · NETWORK", rev. B), which is the
single source of visual truth for this site. Every value below is the card's
own value; nothing has been added, adjusted or "improved".
This file is loaded by every page BEFORE site.css:
Reading the layer
-----------------
ground/surfaces near-white page ground, white cards, one recessed grey
ink four stepped greys; #0B0B0C carries all structure
accent one teal family: graphics teal, text teal, button fill, wash
rules the two hairlines every border on this site is drawn with
dark band the only dark ground on the site (two bands per page, max)
type the two families; no third family exists
geometry one 4 px base, four radii
depth restrained: rules do the work, shadow only confirms hover
motion one easing curve, three durations
layout container, gutter, page margin, card-chrome bar height
typographic ranks rank 1 eyebrow · rank 2 statements (xl/l/m) ·
rank 3 lead & body · rank 4 spec · rank 5 caption
Contrast contract (measured, must stay true)
--------------------------------------------
--ink on --ground 18.9:1 --ink-2 on --ground 10.0:1
--muted on --ground 7.4:1 --muted-3 on --surface 4.8:1
--acc-ink on --surface 5.3:1 #fff on --acc-deep 5.0:1
--on-dark-2 (#A1A1AA) on --dark (#111114) 7.4:1
--acc (#00A6A6) is 3.0:1 on white: graphics, rules, focus rings and 24 px+
figures ONLY. Never body text. Use --acc-ink for teal words.
Card tokens that the card defines but never renders (kept because the layer
is frozen as a whole — a page may legitimately reach for them):
--dark-3, --gut, --r-lg, --sh-3, --t-slow.
========================================================================== */
:root{
/* ground + surfaces */
--ground:#FAFAFA;
--surface:#FFFFFF;
--surface-2:#F4F4F5;
/* ink */
--ink:#0B0B0C;
--ink-2:#3F3F46;
--muted:#52525B;
--muted-3:#71717A;
/* accent */
--acc:#00A6A6;
--acc-ink:#00787A;
--acc-deep:#007D7C;
--acc-soft:#E8F6F6;
/* rules */
--hair:#E4E4E7;
--hair-2:#D4D4D8;
/* dark band */
--dark:#111114;
--dark-2:#17171B;
--dark-3:#1D1D22;
--on-dark:#F4F4F5;
--on-dark-2:#A1A1AA;
--hair-dark:rgba(255,255,255,.11);
--hair-dark-2:rgba(255,255,255,.20);
/* type */
--sans:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* geometry */
--r-xs:4px;
--r-sm:6px;
--r:10px;
--r-lg:14px;
/* depth — restrained: rules do the work, shadow only confirms hover */
--sh-1:0 1px 2px rgba(11,11,12,.05);
--sh-2:0 1px 2px rgba(11,11,12,.05),0 10px 26px -16px rgba(11,11,12,.28);
--sh-3:0 2px 6px rgba(11,11,12,.07),0 22px 44px -22px rgba(11,11,12,.32);
/* motion */
--e:cubic-bezier(.2,.6,.2,1);
--t-fast:150ms;
--t:200ms;
--t-slow:250ms;
/* layout */
--maxw:1220px;
--gut:24px;
--pad:32px;
--meta-h:38px;
/* --- TYPOGRAPHIC AUTHORITY -------------------------------------------
Five ranks, one of them per screen. Authority is hierarchy, not weight:
the display sizes are set in Inter Tight 450/500 with tight negative
tracking, the way an institution sets a statement — not a product page
setting a feature title. Every figure is tabular.
-------------------------------------------------------------------- */
--eh:10.5px; /* rank 1 · eyebrow / ref mono 10.5 caps */
--st-xl:clamp(26px,2.5vw,36px); /* rank 2 · ceremonial statement */
--st-l:clamp(23px,2.1vw,30px); /* rank 2 · section statement */
--st-m:clamp(19px,1.6vw,23px); /* rank 2 · sub-statement */
--tx-lead:clamp(17px,1.35vw,20px);/* rank 3 · lead */
--tx-body:15.5px; /* rank 3 · body */
--tx-sm:13.5px; /* rank 4 · spec / caption */
--cap:11px; /* rank 5 · caption / record */
}
/* One responsive token override, exactly as the card sets it: the page margin
tightens below 768 px. Pages never re-declare it. */
@media (max-width:768px){
:root{--pad:18px}
}