/* ============================================================================= tokens.css — THE single source of colour, type, space, radius and motion. A literal hex outside this file is a bug (a static test will check it). Everything else in css/ and js/ composes these custom properties. DARK IS THE DEFAULT. `:root` is the Ink canvas; `[data-theme="light"]` inverts it. `core/theme` sets the attribute from localStorage, else from prefers-color-scheme. The semantic ramp is LIFTED FROM subservices/notifier.py:26-31 so the bot's Discord cards and the web panel finally agree. Do not re-pick it. ========================================================================= */ /* --- The frozen Phase 0 contract block (verbatim) ----------------------- */ :root{ /* canvas — DARK IS THE DEFAULT */ --ink:#08090B; --surface-1:#101114; --surface-2:#16181C; --surface-3:#1D2025; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --text:#F4F5F7; --text-2:rgba(244,245,247,.72); --text-3:rgba(244,245,247,.48); /* brand accent */ --cyan:#00AEEF; --cyan-hot:#2BC4FF; --cyan-deep:#0086B8; --cyan-weak:rgba(0,174,239,.14); --cyan-line:rgba(0,174,239,.35); /* semantic — LIFTED FROM subservices/notifier.py:26-31, do not re-pick */ --ok:#23A55A; --info:#5865F2; --warn:#F0B232; --bad:#ED4245; --neutral:#4E5058; --ok-weak:rgba(35,165,90,.14); --info-weak:rgba(88,101,242,.14); --warn-weak:rgba(240,178,50,.14); --bad-weak:rgba(237,66,69,.14); --neutral-weak:rgba(78,80,88,.20); /* data-viz ramp — series 1 is brand cyan; must not collide with ok/bad */ --viz-1:#00AEEF; --viz-2:#A78BFA; --viz-3:#F0B232; --viz-4:#2DD4BF; --viz-5:#F472B6; --viz-6:#94A3B8; --viz-7:#FB923C; --viz-8:#4ADE80; --viz-seq-1:#0B2A36; --viz-seq-2:#0E4257; --viz-seq-3:#0E5F7E; --viz-seq-4:#0086B8; --viz-seq-5:#00AEEF; /* radii — the UI Kit scale, exactly */ --r-chip:8px; --r-chip-lg:10px; --r-btn:12px; --r-card:18px; --r-pill:999px; /* type */ --font-display:"Vanik Display","Vanik Text",system-ui,sans-serif; --font-text:"Vanik Text",system-ui,sans-serif; --font-data:"Vanik Data","Vanik Text",ui-monospace,monospace; --fs-mono-label:.72rem; /* uppercase, .18em tracking — the UI Kit kicker */ /* motion */ --ease:cubic-bezier(.4,0,.2,1); --dur-1:.15s; --dur-2:.3s; --dur-3:.5s; /* elevation — dark needs border contrast more than shadow */ --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45); color-scheme:dark; } :root[data-theme="light"]{ --ink:#FFFFFF; --surface-1:#FFFFFF; --surface-2:#F6F6F6; --surface-3:#F3F4F6; --line:rgba(8,9,11,.12); --line-2:rgba(8,9,11,.22); --text:#08090B; --text-2:rgba(8,9,11,.66); --text-3:rgba(8,9,11,.45); --viz-seq-1:#DCF1FA; /* …invert the sequential ramp */ color-scheme:light; } /* --- Derived tokens: things the contract block implies but does not spell -- Everything below exists because a component needed a colour and inventing a hex in components.css is forbidden. Two groups are load-bearing: 1. `--*-fg` foreground pairs. The semantic ramp is picked for Discord embed STRIPES, not for text. Measured against the canvas it sits on: dark : ok 5.9:1 · warn 10.0:1 · bad 4.9:1 · info 4.1:1 ✗ · neutral 2.4:1 ✗ light: every one of them fails outright. So a badge/chip label never uses the raw hue; it uses the `-fg` pair, which is the same hue moved until it clears 4.5:1 on that theme's --surface-1. The raw hue keeps doing what it is good at: fills, strokes, meters, chart marks, 1px accents. 2. `--on-accent` / `--on-solid`. These do NOT flip with the theme. `--ink` does, so `color:var(--ink)` on a cyan button is white-on-cyan (2.5:1) in light mode. A fixed near-black on cyan is 7.9:1 in both themes. -------------------------------------------------------------------------- */ :root{ /* foregrounds that clear AA on this theme's surfaces */ --ok-fg:#47C97D; /* 8.9:1 on --surface-1 */ --info-fg:#8C95F7; /* 7.0:1 — raw --info is 4.1:1, too low for 12px */ --warn-fg:#F0B232; /* 10.0:1 — the raw hue is already fine on Ink */ --bad-fg:#FF7B7D; /* 7.5:1 — raw --bad is 4.9:1, fine but tight */ --neutral-fg:rgba(244,245,247,.72); --link:#2BC4FF; /* 9.4:1 */ --focus-color:#2BC4FF; /* 9.9:1 on --ink — see :focus-visible in base.css */ /* hairlines for tinted components */ --ok-line:rgba(35,165,90,.38); --info-line:rgba(88,101,242,.38); --warn-line:rgba(240,178,50,.38); --bad-line:rgba(237,66,69,.38); --neutral-line:rgba(255,255,255,.14); /* fixed foregrounds for solid fills — these never flip with the theme */ --on-accent:#04121A; /* on --cyan / --cyan-hot: 7.9:1 */ --on-solid:#FFFFFF; /* on --info / --bad solids, large text only */ /* surface overlays, scrims, tracks, shimmer */ --overlay-1:rgba(255,255,255,.05); --overlay-2:rgba(255,255,255,.09); --scrim:rgba(4,6,9,.62); --track:rgba(255,255,255,.09); --skeleton-1:rgba(255,255,255,.05); --skeleton-2:rgba(255,255,255,.11); --code-bg:rgba(255,255,255,.07); /* chart chrome */ --viz-axis:rgba(255,255,255,.22); --viz-grid:rgba(255,255,255,.08); --viz-tip-bg:#1D2025; --viz-tip-line:rgba(255,255,255,.18); /* --- type scale ------------------------------------------------------ */ --fs-hero:clamp(1.75rem,1.2rem + 1.8vw,2.375rem); --fs-h1:1.625rem; /* 26 */ --fs-h2:1.25rem; /* 20 — .page__title */ --fs-h3:1.0625rem; /* 17 — .card__title */ --fs-body:.9375rem; /* 15 — matches the shipped body size */ --fs-sm:.8125rem; /* 13 */ --fs-xs:.75rem; /* 12 */ --fs-2xs:.6875rem; /* 11 — badges only */ --fs-metric:clamp(1.75rem,1.4rem + 1.1vw,2.25rem); --lh-tight:1.15; --lh-snug:1.35; --lh:1.55; --lh-loose:1.68; --ls-kicker:.18em; --ls-tight:-.011em; --ls-wide:.02em; --fw-regular:400; --fw-medium:500; --fw-semi:600; --fw-bold:700; /* --- spacing rhythm — a 4px grid ------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px; /* --- layout dimensions ----------------------------------------------- */ --rail-w:252px; --rail-w-min:64px; --chatlist-w:250px; --content-max:1080px; --thread-max:760px; --report-max:900px; --bp-compact:820px; /* documentation only — @media cannot read a var */ /* --- elevation & focus ------------------------------------------------ */ --shadow-0:none; --focus-w:2px; --focus-offset:2px; /* --- motion ----------------------------------------------------------- */ --dur-0:.08s; --dur-4:.8s; --ease-out:cubic-bezier(.16,1,.3,1); --ease-spring:cubic-bezier(.34,1.32,.64,1); /* the chip-flood geometry — see .btn--flood in components.css */ --flood-inset:4px; font-synthesis-weight:none; font-synthesis-small-caps:none; } :root[data-theme="light"]{ --viz-seq-1:#DCF1FA; --viz-seq-2:#A9DFF5; --viz-seq-3:#5CC3EC; --viz-seq-4:#00AEEF; --viz-seq-5:#0086B8; /* The categorical ramp in the contract block is tuned for Ink. Measured on white every one of the eight lands between 1.7:1 and 2.7:1, and a chart mark carries information, so WCAG 1.4.11 wants 3:1. These are the SAME eight hues walked down until they clear it (3.5-5.9:1); series 1 stays brand cyan. A chart module never reads a hex, so nothing re-renders. */ --viz-1:#0086B8; --viz-2:#7C5CE0; --viz-3:#A8710A; --viz-4:#0E8C7E; --viz-5:#D4488C; --viz-6:#5A6B80; --viz-7:#C05A0C; --viz-8:#1F9D51; --focus-color:#006A93; /* 6.0:1 on white — --cyan-hot is only 2.0:1 */ --ok-fg:#157F44; /* 5.1:1 on white */ --info-fg:#3C45C4; /* 7.4:1 */ --warn-fg:#8A5A00; /* 5.9:1 — raw --warn is 1.9:1 on white */ --bad-fg:#C62B2E; /* 5.5:1 */ --neutral-fg:rgba(8,9,11,.66); --link:#006A93; /* 6.0:1 — raw --cyan is 2.5:1 on white */ --ok-line:rgba(35,165,90,.40); --info-line:rgba(88,101,242,.40); --warn-line:rgba(240,178,50,.55); --bad-line:rgba(237,66,69,.40); --neutral-line:rgba(8,9,11,.14); --overlay-1:rgba(8,9,11,.04); --overlay-2:rgba(8,9,11,.07); --scrim:rgba(8,9,11,.38); --track:rgba(8,9,11,.09); --skeleton-1:rgba(8,9,11,.05); --skeleton-2:rgba(8,9,11,.10); --code-bg:rgba(8,9,11,.06); --viz-axis:rgba(8,9,11,.28); --viz-grid:rgba(8,9,11,.09); --viz-tip-bg:#FFFFFF; --viz-tip-line:rgba(8,9,11,.16); --shadow-1:0 1px 2px rgba(8,9,11,.07); --shadow-2:0 10px 28px rgba(8,9,11,.12); } /* --- Armenian typography ------------------------------------------------ Armenian sets ~5% optically smaller than Latin at the same em and runs 15-25% longer. `font-size-adjust: from-font` fixes the first half properly; the 1.045em bump is the fallback for engines that lack it. The second half is a layout rule, not a type rule: every string-bearing box is sized by the Armenian string (see layout.css). font-synthesis-weight:none is above, on :root — faux-bold smears the connections in Armenian letterforms, and a missing weight should look wrong (and get subset properly) rather than look plausibly bad. ---------------------------------------------------------------------- */ @supports (font-size-adjust:from-font){ :lang(hy){ font-size-adjust:from-font; } } @supports not (font-size-adjust:from-font){ :lang(hy){ font-size:1.045em; } } /* --- Print always renders on paper, never on Ink ------------------------ A dark canvas prints as a solid black page. Override the palette here, in the file that owns colour, rather than sprinkling !important elsewhere. ---------------------------------------------------------------------- */ @media print{ :root, :root[data-theme="dark"], :root[data-theme="light"]{ --ink:#FFFFFF; --surface-1:#FFFFFF; --surface-2:#FFFFFF; --surface-3:#FFFFFF; --line:rgba(8,9,11,.28); --line-2:rgba(8,9,11,.45); --text:#08090B; --text-2:rgba(8,9,11,.78); --text-3:rgba(8,9,11,.60); --link:#006A93; --focus-color:#006A93; --ok-fg:#157F44; --info-fg:#3C45C4; --warn-fg:#8A5A00; --bad-fg:#C62B2E; --neutral-fg:rgba(8,9,11,.72); --overlay-1:transparent; --overlay-2:transparent; --code-bg:rgba(8,9,11,.06); --track:rgba(8,9,11,.14); --shadow-1:none; --shadow-2:none; --viz-axis:rgba(8,9,11,.55); --viz-grid:rgba(8,9,11,.18); --viz-seq-1:#DCF1FA; --viz-seq-2:#A9DFF5; --viz-seq-3:#5CC3EC; --viz-seq-4:#00AEEF; --viz-seq-5:#0086B8; color-scheme:light; } }