/* lina4.ai design tokens, the SINGLE canonical source (D13). Every design primitive lives here
exactly once: colour, on-accent ink, semantic status, fluid type scale, spacing, radius,
elevation, motion (easing/durations) and the warm-classic type families (Punkt 0).
Two consumers INHERIT from this one file, never re-declare it (D-062 one-source):
- the website (web/): base.html links this file BEFORE style.css, so style.css and every
template read the tokens via var(). Cache-buster spans both files (templating.py).
- the Lina app (lina-app/): its web client embeds CSS inline in shell.ts and cannot ,
so the app BUILD inlines this same file (build-inline consume path, agreed 2026-07-05).
Do not hand-copy the values into shell.ts; the build carries them.
Rule: change a token ONCE here. The circular-definition trap (a role pointing at var(--self)
through a blanket tokenising sed) is why the values are literal hex/clamp; keep them literal.
CAUTION, the ground/ink roles below now carry the Lina-App too (2026-07-26): the app dropped its
own hex values (#0C0B0A, #ffffff12, ...) in favour of these roles, so its header, cards and
overlays follow every edit here, and MORE visibly than the website, where photos and --ember
dominate the impression. Literal copies that do NOT follow an edit and must be pulled by hand:
the app's per-screen (login/newproject #100C08, shell/home/project
#1A140D) and its webmanifest; on the website base.html theme-color, favicon.svg, and the #100C08
edge fade baked into the rendered photos (web/tools/images/, re-render ruled out 2026-07-26).
Checked 2026-07-27 against the real pages (home, samples, what-is-this, how-it-works, login;
1440 and 390 wide): the app's proposed desaturation ("Waerme zurueck", chroma to ~55%, the eight
values in lina-app/TODO.md) moves the rendered site by 1.9 of 255 per channel on average, where
two identical captures already differ by 0.25, and no text/ground pair leaves its WCAG band.
Decision: not adopted, the values stay. A visible warmth change for the app runs through
--surface-lift alone (see below), no split of this source. Since 2026-08-05 the website reads that
token too (the account card's mark), so a change there is no longer app-only -- check both. */
:root {
--bg: #100C08;
--surface: #1A140D;
--surface2: #221A12;
--border: #2E2417;
--border2: #39301f33;
/* Lifted surface for the Lina-App's system/action overlays (watchbar "runs elsewhere", prompts),
which sat on the chat ground and were invisible. #342819 is the lightest warm-neutral step that
still holds --muted body text above WCAG AA (4.79:1), ~L*17, +13.6 L* over the ground.
Neutral-warm, no ember tint (ember stays the one accent; matches the paper-roles note above,
"the base is neutral, the warmth lives only in the accent"). The Lina-App references it (with a
fallback that resolves to this value after the merge to main); the website reads it in one place,
the round mark on the account card (.idcard-badge), where --ember on it holds 6.8:1. */
--surface-lift: #342819;
/* interactive control outline: form fields need a >=3:1 edge against their surround (WCAG 1.4.11),
where the hairline --border is deliberately too faint. Scoped to inputs, not the decorative rules. */
--field-border: #73695B;
--text: #F1ECE3;
--muted: #9D9486;
/* lifted just enough to clear AA (4.5:1) on surface2, the worst case for hints/badges/legal fine print */
--faint: #8D8272;
--ember: #EFA24A;
--ember-deep: #E07B3C;
--grad: linear-gradient(120deg, #F3B05C, #E07B3C);
/* ink for text sitting on the ember gradient/solid (buttons, badges, chips): one source,
was the raw #1B1206 repeated ~9x. */
--on-accent: #1B1206;
/* semantic status colours: one source per role. Previously ~15 raw hex values scattered across
badges/ampel/meters/check-lists, already drifting (the teal appeared in both cases). Border and
glow variants derive from these via color-mix(), so a role has exactly one value.
warn reuses the deep ember (the warm "attention" tone), no separate hue. */
--ok: #7BD88F;
--info: #7CC4F2;
--teal: #6FD6C4;
--danger: #EE4B3B;
--warn: var(--ember-deep);
/* fluid type scale (D-058): everything in rem, clamped to the viewport */
--step--2: clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem); /* caption tier: badges, meta, fine print */
--step--1: clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
--step-0: clamp(1rem, 0.95rem + 0.28vw, 1.12rem);
--step-1: clamp(1.15rem, 1.05rem + 0.6vw, 1.4rem);
--step-2: clamp(1.5rem, 1.2rem + 1.6vw, 2.1rem);
--step-3: clamp(1.9rem, 1.4rem + 2.6vw, 2.9rem);
/* display tier: hero headlines live in the scale too (one source). Two deliberate steps,
a full-width centered hero and a smaller hero for a narrow/over-photo column. Same mobile
floor (2.6rem) so both read identically on phones, where every hero is single-column. */
--step-hero: clamp(2.6rem, 1.4rem + 5.4vw, 5.6rem);
--step-hero-narrow: clamp(2.6rem, 1.4rem + 4.8vw, 4.6rem);
/* closing scene (cta-cine) tier: the door-scene headline, Lina's handwritten sign-off and the
wordmark under the closing button. Named here so no raw sizes live off-scale in style.css. */
--step-closing: clamp(2rem, 1.2rem + 4.2vw, 3.6rem);
--step-signature: clamp(1.7rem, 1.1rem + 2.4vw, 2.5rem);
--step-closing-mark: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
--gutter: clamp(1.25rem, 0.6rem + 3vw, 1.75rem);
/* spacing: deliberately fluid, not a fixed step ladder. Block rhythm is set per component with
clamp() so it scales with the viewport (D-058); --gutter is the fluid page inline padding.
A fixed --space-1..7 rem scale was carried here but never consumed on either surface
(website or app), so it was removed rather than left as a design-system claim nothing honours. */
/* radius scale: one calm, consistent set instead of ad-hoc per-component values.
--r-xs is the small-control tier (badges, chips, meter fills) that was raw 0.3-0.4rem. */
--r-xs: 0.35rem;
--r-sm: 0.5rem;
--r-md: 0.8rem;
--r-lg: 1.2rem;
--r-xl: 1.6rem;
--r-pill: 2.5rem;
/* elevation on the warm near-black: hierarchy comes from a light-catching hairline + a 1px inset top
glint (a simulated overhead light), not a hard drop shadow which is invisible on this background.
The glint is a WARM lamp light (amber-tinted white), not cool white, so the simulated overhead
light reads as the workshop lamp (brand/visual.md), matching the warmed ground. */
--shadow-card: 0 0 0 1px rgba(255, 244, 230, 0.05), inset 0 1px 0 rgba(255, 240, 220, 0.055),
0 1px 2px rgba(20, 12, 4, 0.5), 0 0.5rem 1.5rem rgba(0, 0, 0, 0.45);
--shadow-lift: 0 0 0 1px rgba(255, 244, 230, 0.07), inset 0 1px 0 rgba(255, 240, 220, 0.065),
0 1rem 3rem rgba(0, 0, 0, 0.6);
/* one easing + duration vocabulary so every hover/transition feels of a piece. The expo-out curve
(fast start, long calm settle) reads "expensive" and quiet; no bounce (too playful for the brand).
Hover enters fast, exits slow (Comeau): the in-duration is overridden on :hover. */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--t-fast: 0.14s;
--t-med: 0.24s;
--t-slow: 0.32s;
--scrim: rgba(14, 10, 6, 0.6);
/* type families (Punkt 0, warm-klassisch): a characterful antiqua for expressive display,
a warm humanist grotesk for body/UI. Display is applied to the marketing/landing headings;
the functional app chrome keeps the body grotesk for dense legibility. */
--font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
--font-body: "Work Sans", "Work Sans Fallback", system-ui, sans-serif;
/* ---------------------------------------------------------------------------------------
LIGHT-GROUND ROLES ("paper"), added 2026-07-20.
Everything above is the website: one dark theme, and every value is tuned to sit on --bg.
That is a complete answer for a surface whose ground we own. It is NOT an answer for a
surface whose ground someone else decides -- transactional email above all, and later print
or anything embedded elsewhere. Measured in the real Outlook iPad app: it discards the
declared page background entirely and paints its own mid grey (#585651) in dark mode,
whether we asked for near-black or warm white. So a mail cannot own its ground, and every
dark-tuned value collapses there: --text lands at 1.13:1 on a light ground, --ember as text
at 2.03:1, the lamp artwork at 1.59:1.
Hence these roles: the SAME identity translated to a light ground, so nothing outside the
website has to invent colours (which is exactly what happened while the mail design was
being built, and it drifted). The contrast values noted per role are measured against
--paper-card (#FCFCFB), the reading surface, and satisfy WCAG 1.4.3 for text (4.5:1) and
1.4.11 for control edges (3:1). On the bare field --paper (#F2F1EF) every text role lands
about 9 percent lower (tightest is --paper-ember at 4.9:1), so text set directly on the
field still clears AA.
The accent keeps its hue and changes only its lightness: --ember is a surface colour here
(button fill, artwork), --paper-ember is the same ember darkened until it can carry TEXT.
Do not add further light values ad hoc; extend this block instead (D-062 one source).
THE BASE IS NEUTRAL, THE WARMTH LIVES ONLY IN THE ACCENT (revised 2026-07-20 after measuring
four real clients). The first version of these roles was warm throughout: --paper carried
b*+3.2, the body copy b*+9.1, the hairline b*+10.6. On a light ground that warmth is
invisible. It stops being invisible the moment a client recolours the mail for dark mode:
chroma survives while lightness is capped, so relative to its own lightness the warmth grows
by a factor of ~40, and the ground came out as saturated brown (measured #2A2105, chroma 17.4
in Outlook macOS, against chroma 1.9 for the website's own --bg). Amber headings on that
ground put every element on one narrow yellow axis with no neutral anywhere, which reads as
cheap however carefully each single value was picked.
The website never had this problem, and the fix is to copy what it actually does rather than
what we assumed it does: a near-neutral ground, ONE warm accent used small (the 4, the
signature, the button), and headings in ink, never in ember. Keep every base role below
chroma 3; anything warmer belongs in the accent or nowhere. */
--paper: #F2F1EF; /* the outer field, near-neutral (chroma 1.1) */
--paper-card: #FCFCFB; /* the reading surface sitting on the field (chroma 0.5) */
--paper-ink: #171514; /* 17.7:1 headings and the wordmark */
--paper-text: #3F3D3A; /* 10.5:1 body copy */
--paper-muted: #65625E; /* 5.9:1 fine print (a lighter grey vanishes on Outlook's grey) */
--paper-ember: #A84E15; /* 5.4:1 the ember, darkened until it carries text on paper */
--paper-rule: #E6E4E1; /* hairlines */
--paper-cta: #CE7022; /* the BUTTON fill on a foreign ground: a deep ember, NOT the site's
bright --ember (#EFA24A). Measured against all four states, a button
must clear ~3:1 as an AREA against its surround both by day (light
card) and by night (every client darkens the card to a mid grey).
Only a mid-tone does both: the site's bright ember folds to 1.0:1 on
the iPad (a warm tone above L*~60 is capped into brown), and a
near-black vanishes on the darkened night card (Mac 2.6:1). This tone
sits at L*57, below the fold threshold, so at night it is LIFTED into
a glowing #FF994B instead of muddied. Dark ink rides it in both modes
(day 5.2:1, night 8.7:1), exactly as --on-accent rides --ember on the
site. This is the site's amber CTA translated, not abandoned. */
}