/* ==========================================================================
Theme faces, self-hosted. Core carries them because core now ships a working
brand: a file that names a face it does not carry renders differently
depending on whether the consumer happened to add the same .
Ronzino and Coconat — Collletttivo, SIL OFL. Martian Mono — Evil Martians,
SIL OFL, variable on wdth + wght; three static instances because the mono
role uses three weights and the role does not need the axes.
See dist/fonts/ for the licences.
========================================================================== */
@font-face{font-family:'Ronzino';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/Ronzino-Regular.woff2') format('woff2');}
@font-face{font-family:'Ronzino';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/Ronzino-Medium.woff2') format('woff2');}
@font-face{font-family:'Ronzino';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/Ronzino-Bold.woff2') format('woff2');}
@font-face{font-family:'Coconat';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/Coconat-Regular.woff2') format('woff2');}
@font-face{font-family:'Coconat';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/Coconat-Demi.woff2') format('woff2');}
@font-face{font-family:'Coconat';font-style:normal;font-weight:700;font-display:swap;
src:url('fonts/Coconat-Bold.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('fonts/MartianMono-Regular.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:500;font-display:swap;
src:url('fonts/MartianMono-Medium.woff2') format('woff2');}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:600;font-display:swap;
src:url('fonts/MartianMono-SemiBold.woff2') format('woff2');}
/* ==========================================================================
Lew Design System (LDS) — core
Layer 1: primitives · Layer 2: semantics (One Token) · Layer 3: components
Themes (Layer 4) define: --c-* brand scale, --th-*, --radius*, shadows,
density, --icon-size/--icon-weight. This file never hardcodes a hex.
========================================================================== */
:root{
/* ---- Layer 1: primitives ---- */
/* Neutrals: the previous gray lightnesses exactly, hue rotated ALONG the ramp
— 105 at the paper end to 150 at the ink end, on a chroma arc that dips
through the mids and rises at the bottom. Oat is a yellow-green paper and
the ink is a green-black, and they are not the same hue: one fixed hue
gives you a neutral ink under warm paper, or a yellow-green ink. Measured
drift against the old ramp: max 0.32 Lc across all eleven steps. The
hierarchy is unchanged; only its temperature is.
Retuned Aug 2026 for chroma, because the ramp had gone dead. Chroma sagged
to C .0146 through the middle — a pigment ramp does not do that, and the
result read as one oat lightened and darkened by opacity rather than as a
neutral with a temperature. Two things changed:
CHROMA now carries a curve instead of a sag. It is felt in the light-mid
tints (200/300 at .0285/.0300, roughly double), eased through the value mids
where text legibility lives, and deepest in the shadows. A border, a sunken
fill and a separator now sit in a colour rather than in a grey.
HUE is disciplined where the old ramp wandered. The light half held 104 deg
and swung to 112 exactly where chroma peaked, which is the recipe for olive;
it now stays in the paper's own family through 300 and only then walks into
the brand's forest green as it darkens. More saturation, less cast.
Lightness is untouched at every step, so the APCA curve moves at most
0.26 Lc and nothing downstream re-tests. */
--gray-50:#FAF9E9; --gray-100:#F3F1DF; --gray-200:#E5E4CE; --gray-300:#CCCCB6;
--gray-400:#AEAF9B; --gray-500:#888C7A; --gray-600:#696E5F; --gray-700:#4A5143;
--gray-800:#2D3729; --gray-900:#132012; --gray-950:#041206;
/* ---- the default brand ramp ----
Core shipped no --c-* ramp, which meant .emph-subtle, .emph-soft,
.emph-strong and every status tint resolved to nothing until a theme
mounted. "Core never hardcodes a hex" was protecting the wrong boundary: it
kept core theme-agnostic by keeping it non-functional. Themes still replace
all of it — the difference is that replacing it is an override rather than a
prerequisite.
Green at OKLCH hue 150, the ink's own hue, each step's lightness solved
until its measured APCA hits a fixed target. The accent is the ink with the
chroma raised, so an accented word reads as the same voice louder rather
than as a different voice interrupting. */
--c-50:#D5ECD8; --c-100:#C2E5C8; --c-200:#8FC99A; --c-300:#61AE73;
--c-400:#3C9656; --c-500:#1A803E; --c-600:#00662B; --c-700:#004F1D;
--c-800:#003A12; --c-900:#002008; --c-950:#000501;
/* ---- the link: a role, not an emphasis level ----
A link is text with behaviour, and One Token has seven object-colour roles
and none of them mean that — so themes were painting links with
--text-accent, which reads backwards both ways: every accented word looks
clickable and every link looks like emphasis.
It is a role and not a theme knob because the fallback has to be safe. A
consumer shipping a theme with no --link still renders links, and before
this they rendered browser blue on whatever ground the theme chose — the one
colour in the document nobody measured.
Two values, because a link lands on both grounds and one hue cannot clear
the body floor on both. --link-dark is not a dark-mode variant; it is the
same role solved against the other ground. Colour ALWAYS travels with an
underline: the distinction has to survive grayscale print and red-green
colour blindness, which — the accent being green — is the whole of it.
The light value was #00437C, which measured Lc 85.6 on oat and read as navy:
technically a blue, perceptually just dark ink. It is now #005391, Lc 79.9 —
a step down the contrast curve and a visible step up in blueness. That sits
between the spec's Lc 75 tier and its Lc 90 body tier, which is a deliberate
trade and safe here for one reason: a link is marked TWICE, by hue and by a
permanent underline, so it does not carry the distinction on contrast alone
the way body ink does.
Three values per ground, not one. Hover and pressed both move DOWN the ramp
— every state has more contrast than the resting link, never less, so the
feedback can never cost legibility. */
--link-light:#005391;
--link-light-hover:#003B77;
--link-light-pressed:#00245F;
--link-dark:#AADDFF;
--link-dark-hover:#D6ECFF;
--link-dark-pressed:#7FC7F2;
--link:var(--link-light);
--link-hover:var(--link-light-hover);
--link-pressed:var(--link-light-pressed);
/* ---- the CTA: an object, not a sixth emphasis level ----
One value, not a ramp. It is a highlighter; build eleven steps of it and you
have a second brand hue, with two colours competing to mean "act on this".
It sits outside the ladder on purpose — subtle → soft → strong → stark is a
scale of loudness and every step retints with the brand hue, and the CTA
does neither. It is shaped like an emphasis class so it composes with the
same components, and that is the whole of the resemblance.
In core rather than in a theme because a theme could not finish the job:
components paint from an explicit emphasis list, so every theme wanting a
CTA had to hand-write the .lds-btn opt-in. Written once, here. */
--cta:#E0E9B4;
--cta-text:var(--gray-900);
--cta-hover:#D6E19E;
--cta-pressed:#C8D586;
/* ---- the grain ----
Luminance-neutral: mid-gray noise under `overlay` is a no-op on average
lightness, so every measured pair in the system stays true underneath it.
A token rather than a page rule because it was pasted by hand into
index.html and about.html, and a surface treatment that has to be re-pasted
per page is not part of the system. The consumer still owns the element it
paints on; core supplies the image and the opacity. */
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
--grain-opacity:.4; /* @kind other */
/* ---- breakpoints ----
READ THIS BEFORE USING THEM: a custom property CANNOT be read inside a
media query. `@media (min-width: var(--bp-md))` does not fail loudly, it
fails silently — the whole block is dropped. These tokens exist so that
JS (matchMedia, ResizeObserver), container queries, and clamp()/calc()
read the same numbers the stylesheet does, and so the numbers have names.
The @media rules below still spell the value; the token is the record of
what that value MEANS.
Four widths, chosen by what the layout has to do rather than by device:
--bp-sm one column, thumb reach, no persistent chrome
--bp-md two columns fit, or a rail plus content
--bp-lg a persistent sidebar stops costing content width
--bp-xl line length, not space, becomes the constraint
min-width-first, always. The 767/768 style off-by-one only exists when a
max-width query and a min-width query try to describe the same boundary
from both sides; one of them is always wrong by a pixel, and fractional
viewport widths (browser zoom, Windows scaling) land in the crack. Write
the base rule for small and add capability upward — then there is one
number per boundary and no gap to fall into. */
--bp-sm:480px;
--bp-md:768px;
--bp-lg:1024px;
--bp-xl:1440px;
/* ---- the height breakpoint, which is the one people forget ----
A phone in landscape is ~740-930px WIDE and ~380-430px TALL. Every
width-only breakpoint files it as a tablet and hands it a tablet layout
with a tablet's assumptions about vertical room — and that is where
centred modals, bottom sheets, sticky headers and full-height drawers
break, because the thing that ran out was height and nothing measured it.
So: width decides the COLUMN COUNT, height decides whether anything may
assume vertical room. Any component that fills or centres vertically pairs
its width query with `(max-height:520px)`. 520 clears the tallest phone
landscape (932x430 on a Pro Max) with room, and no tablet in portrait or
landscape is under it. */
--bp-short:520px;
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;
--size-0:11px;--size-1:12px;--size-2:13px;--size-3:14px;--size-4:16px;
--size-5:19px;--size-6:24px;--size-7:32px;--size-8:44px;
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;
--ease-standard:cubic-bezier(.2,.8,.2,1) /* @kind other */;--dur-fast:120ms /* @kind other */;--dur-base:180ms /* @kind other */;
/* --dur-slow + --ease-decelerate cover the large-object case: sheets, drawers
and view-transition groups, where the standard 180ms ease lands too abrupt.
Contributed up from palette, which drives every view-transition group off
this pair — mismatched easing between a resizing card and a sliding sheet
reads as jank even at full frame rate. */
--dur-slow:320ms /* @kind other */;--ease-decelerate:cubic-bezier(.22,1,.36,1) /* @kind other */;
/* ---- Brand Expression Levers ---- */
/* typography primitives */
--tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em;
--tracking-wide: 0.02em; --tracking-wider: 0.04em; --tracking-widest: 0.08em;
/* --leading-relaxed closes the widest gap in the ladder. 1 / 1.15 / 1.4 / 1.6
steps by 15%, 22%, 14% — and then nothing between 1.4 and 1.6, which is
where every body measure narrower than about 55ch actually wants to sit.
1.6 was solved for a 62ch paragraph; in a 34ch column the lines are short
enough that the same leading reads as gaps rather than as rhythm. */
--leading-none: 1; --leading-tight: 1.15; --leading-normal: 1.4;
--leading-relaxed: 1.475; --leading-loose: 1.6;
/* Four font roles. --th-ui is the CONTROL role: anything interactive or
chrome — buttons, tags, chips, field labels and inputs, nav links. It
exists because --th-body may legitimately be a serif (an editorial theme),
and a serif is wrong on a button label — a control is chrome, not prose.
Defaults to --th-display so a theme gets sans controls without opting in;
override --th-ui alone to decouple them.
The test: would you read it, or click it? Prose keeps --th-body, and only
four rules still take it — card__body, card__meta, banner, modal__body.
Declare --th-ui in the THEME, not once at :root. See decisions.md. */
--th-display:'Coconat','Iowan Old Style',Georgia,serif; /* @kind font */
--th-body:'Ronzino','Helvetica Neue',system-ui,sans-serif; /* @kind font */
--th-ui:var(--th-body); /* @kind font */
--th-mono:'Martian Mono',ui-monospace,'SF Mono','SFMono-Regular',
'Cascadia Mono','Roboto Mono','Liberation Mono',Menlo,Consolas,monospace; /* @kind font */
/* ---- the mono role's face corrections ----
A mono set at --text-meta beside the body sans at --text-meta reads heavier,
and the reason is not the stroke: "same font-size" means same em box, and
two faces put different amounts of letter inside one. The mono's x-height
fills more of its em, so at 12px it is optically the larger of the two and
it wins an argument it was never meant to enter — metadata outshouting the
prose it annotates.
The fix is font-size-adjust, not a smaller literal. --mono-adjust holds ONE
number: the x-height-to-em ratio of --th-body. The browser then scales
whatever face --th-mono names until its x-height matches, so the correction
survives a face swap — change --th-mono and the balance holds with nobody
re-tuning a size. A hand-picked 0.9 multiplier would be correct for exactly
one typeface. The number belongs to --th-body and has to travel with it:
font-size-adjust cannot read another family's metrics.
--mono-tracking is a judgement, not a measurement. A monospace is
letterspaced by construction; --tracking-widest on top of a face that sets
~18% wider than the sans produces a label that takes a whole column to say
one word. --mono-weight drops labels from bold to medium: with x-heights
matched, the bold was carrying a size mismatch that no longer exists.
Needs Chrome 127 / Safari 16.4. Below that the mono renders uncorrected,
which is the previous behaviour — it degrades to before, not to broken. */
--mono-adjust: 0.53; /* @kind other */
--mono-tracking: 0.03em;
--mono-weight: var(--weight-medium);
/* ---- the highlight's own box (see .lds-mark) ----
Height and offset in em, so the painted box is a function of the FONT SIZE
and never of the line-height. Percentages resolve against the inline
fragment's content area, which the face's metrics set at roughly 1.25em —
taller than a tight line box, which is precisely the bug this replaces.
Vertical padding is zero for the same reason: inline padding paints outside
the line box and cannot be contained. */
--mark-height: 0.92em;
--mark-offset: 0.14em;
/* type composites (size, leading, tracking) */
/* Two of these four are literals rather than scale steps, and that is
deliberate: the scale describes headings and captions, and body and subhead
are set where the faces actually work.
--text-body 17px, down from 18. 18 came from the showcase, where every
control had independently been pushed there by hand — body and control
agreeing was the argument, and it still holds, but 18 was set against a wide
measure. In a card or a modal the column is narrow, and there 18 reads as
set for a child rather than generous. 17 keeps the pair (control is unchanged
at --text-control) and settles the paragraph.
--text-subhead 28px. 24 was a section subhead and too quiet for a card
title, which is the role's only remaining consumer now that subdued ledes
take body size. 28 on --leading-tight resolves to 32px, so the pair needed
no second edit.
--text-caption 15px, and it means small PROSE only. It was carrying prose
and machine metadata at once; 12px is right for a counter and too small for
a sentence. Metadata moved to --text-meta, which keeps 12.
15 rather than 14 because caption and body are one step apart now, not four:
they are the same voice at two volumes, and the old gap made a caption under
a paragraph read as a different kind of text instead of a quieter one.
--tracking-subhead is 0. Negative tracking is a display correction — it
exists because letterfit that is right at 18px opens up at 44px. At 24-28px
the body sans is still inside its text range and -0.02em closes the
counters. Title keeps its negative value, where the correction earns. */
/* Retuned from the specimen (Aug 2026). Caption went 14 → 15px and body 18 →
17px, which narrows the gap between them to a single step — deliberate: they
are both prose in the same face, and a 4px jump made a caption under a
paragraph read as a different voice rather than a quieter one.
Body's leading came off --leading-relaxed (1.6) onto 1.35. At 18px relaxed
was set for a wide measure, and every real consumer — card body, banner
message, modal copy — is a narrow column where 1.6 opens the lines until the
paragraph stops holding together as a block. */
--text-caption: 15px; --leading-caption: var(--leading-normal); --tracking-caption: 0.01em;
--text-body: 17px; --leading-body: 1.35; --tracking-body: 0.006em;
--text-subhead: 28px; --leading-subhead: var(--leading-tight); --tracking-subhead: var(--tracking-normal);
/* Regular, not medium. At 28px the UI sans already has all the presence a
subhead needs from its size, and the extra weight was the same noise the row
titles were carrying — it read as a heading shouting rather than a heading. */
--weight-subhead: var(--weight-regular);
--text-title: var(--size-8); --leading-title: var(--leading-none); --tracking-title: var(--tracking-tight);
/* ---- HERO: the role two pages were hand-rolling ----
--text-title is a section title, and a page with one h1 needs something
louder than one — index.html and about.html each carried their own .display
rule with a literal clamp and a leading override. A role two pages
reimplement identically is a missing role.
Fluid, because a hero is the one place where the size is a function of the
viewport rather than of the scale: at 44px it is a heading, at 72px it is
the page. The scale steps stay fixed; only this role interpolates.
Leading is 1.1, a literal. An earlier attempt shipped a --leading-negative
primitive at 0.95; it survived a two-line hero and closed up on a
three-line one, and it had exactly one consumer. See decisions.md. */
--text-hero: clamp(var(--size-8), 7vw, 72px);
/* 1.0. At the clamp's 72px ceiling a hero is one or two words at display size,
where 1.1 leaves a visible band between two lines that reads as a gap rather
than as a set heading. Solid leading is what a display face is cut for. */
--leading-hero: 1.0;
--tracking-hero: var(--tracking-tight);
--weight-hero: var(--weight-regular);
/* ---- LABEL: a section eyebrow is not metadata ----
"Set metadata in mono" was taken by the eyebrows, which put a phrase naming
a section in uppercase mono beside a counter in uppercase mono, as though
prose and machine output were the same object. Mono keeps dates, tokens,
numbers, hex and counters. A label takes the sans — on --th-ui rather than
--th-body, for the reason --th-ui exists: an eyebrow is chrome, not prose.
Sentence case, like the headings.
Two scales, because the role names a SECTION (19px, beside a 44px title)
and a COMPONENT (14px card kicker, panel heading), and one size cannot do
both — 19px on a kicker competes with the card's own title.
The small one is its own composite, not a smaller copy. At 19px beside a
title, position and subdued ink separate a label from prose on their own; at
14px directly above a card title in the same family they do not, so it takes
a medium weight and a hair of tracking. 0.014em is a literal because the
smallest positive primitive (0.02em) reads as letterspacing at 14px. */
--text-label: var(--size-5);
--leading-label: var(--leading-tight);
--tracking-label: var(--tracking-normal);
--weight-label: var(--weight-medium);
--text-label-sm: var(--size-3);
/* ---- CONTROL: the text inside interactive chrome ----
Buttons, inputs, tabs, menu items and list rows were each picking a raw
primitive (--size-1 here, --text-body there), which is why button labels
looked arbitrary next to a tab. Three named steps, and a control picks a
step rather than a pixel: sm 13 / base 14 / lg 16 — all three are steps on
the primitive scale (--size-2 / --size-3 / --size-4).
The first version of this ran 12 / 13 / 14, which put the default control
five steps below an 18px body and read as fine print rather than as an
interface. 12px (--size-1) is still a primitive and still used, but not for
anything a user has to read to operate a control.
BASE is the default for chrome text — buttons, inputs, tabs, menu items,
list rows, checkbox and radio labels, table cells. sm is not a smaller
default: it is for text that is genuinely secondary beside one of those
(a row subtitle, a field label, a shortcut hint, a small button, a tag). */
--text-control-sm: var(--size-2);
--text-control: var(--size-3);
--text-control-lg: var(--size-4);
--weight-label-sm: var(--weight-medium);
--tracking-label-sm: 0.014em;
/* ---- META: machine output. Counters, dates, tokens, hex, measurements. ---- */
--text-meta: var(--size-1);
--leading-meta: var(--leading-normal);
--tracking-meta: var(--mono-tracking);
--weight-meta: var(--mono-weight);
/* ---- radius + corner shape ----
The scale was 4/8/12/16, which read sharp on every surface large enough to
show a corner. Raised across the board so an unthemed LDS is soft by
default; themes still override freely, and the two that do (product,
palette) are unaffected because they set their own.
--corner-shape is the second axis. `squircle` is a continuous superellipse
rather than a circular arc: the curve starts earlier and flattens through
the corner, which is the shape that reads as drawn rather than filleted.
Note the superellipse() ladder runs the other way — higher numbers are
SQUARER, not rounder, so squircle is the rounded end of that range.
Applied only to rectangular components. At --pill (999px) the radius
clamps to half the short side, and a squircle there flattens the ends of
what should be a stadium — pills stay round. */
--radius-sm: 10px; --radius-base: 18px; --radius-lg: 28px; --radius-xl: 36px; --radius-pill: 999px;
--radius: var(--radius-base);
--pill: var(--radius-pill);
--corner-shape: squircle;
/* density multiplier */
--density: 1; /* @kind other */
/* ---- control size scale ----
One ladder of min-heights for everything a finger or a cursor lands on.
Before this, controls sized themselves from padding alone, so a button, a
text input and a tab in the same row came out three different heights and
nothing in the system said what a "medium" control was.
Steps are 4px apart because the whole spacing system is on a 4px grid;
a scale that drifts off it produces controls that cannot be aligned with
anything around them.
--control-sm 32 dense tables, toolbars, secondary chips
--control-md 36 compact forms, small buttons
--control-lg 40 the default for tabs and list rows
--control-xl 44 the touch floor: default buttons, inputs
--control-2xl 48 primary actions, mobile-first surfaces
--control-3xl 52 hero CTAs, single-action screens
THE FLOOR IS PART OF THE SCALE. --target-min is now an alias for the xl
step rather than a separate number, because the two were describing the
same thing and could drift apart. sm and md sit BELOW the floor on
purpose: they are legitimate sizes for a mouse and illegitimate for a
thumb, and the coarse-pointer rule further down grows their hit area
without changing their size. Anything smaller than sm is not a control. */
--control-sm: 32px;
--control-md: 36px;
--control-lg: 40px;
--control-xl: 44px;
--control-2xl: 48px;
--control-3xl: 52px;
/* minimum interactive target. Themes may raise it (palette uses 44px for
chrome that sits over artwork); components should never hardcode a size
below it. */
--target-min: var(--control-xl);
/* iconography — three steps, because an icon is sized by the text it sits
beside, not by the component it sits in. sm pairs with caption, base with
body, lg with subhead. Tag icons were a hardcoded 13px, which is not a
step on anything. */
--icon-size-sm: 16px;
--icon-size: 20px;
--icon-size-lg: 24px;
--icon-weight: 1.75;
}
*{box-sizing:border-box;}
/* ---- Layer 2: One Token semantic resolution ----
mode × emphasis → the seven object-color roles.
--c-* (brand scale) is supplied by the theme + .hue-* override. */
/* --text-subdued was one ramp step below --text on every level, which is a
plausible-looking rule and a measurably wrong one. Measured on green: 68.8 Lc
on plain, 48.6 on subtle, 43.9 on soft — against a body floor of 75. The role
carries card bodies, help text and metadata, all of it prose at body size, so
it was the most-read text in the system and the least legible.
It is now solved per level against that level's own fill: gray-700 on paper,
c-800 on the tints, c-200 on stark. Every value clears Lc 75.
On STRONG it equals --text, and that is the finding rather than a shortcut: on
a c-600 fill the ramp holds no second ink that is both lighter than white and
still legible — c-50 measures 64.8. So a filled surface has one ink, and any
hierarchy on it comes from size, weight and position instead of from colour.
--- LIGHT is the default resolution. Drop emph-* on ANY element and it
resolves standalone; put it inside (or on) a .mode-dark for dark values.
This is what lets you write
to promote
one object without touching its container. --- */
/* PLAIN — neutral surface. The default for cards and page chrome. */
/* --background was pinned to #FFFFFF. On oat paper a white card does not read
as brighter, it reads as a hole — the paper's chroma stops at the card edge.
The surface IS gray-50, so this needs no hex. Three of the other changes are
floor failures on the steeper ramp, not preferences: gray-500 measures Lc 47.6
on the page against a Lc 60 content floor (gray-600 is 72.2), and gray-200
measures Lc 10.2 against a Lc 15 non-text floor (gray-300 is 24.1). gray-200
stays on --border-subdued below the floor as the one knowing exception: a
decorative separator inside an already-bounded card, never the sole boundary
of a control. */
.emph-plain {--background:var(--gray-50);--text:var(--gray-900);--text-accent:var(--c-600);--text-subdued:var(--gray-700);--icon:var(--gray-400);--border:var(--gray-300);--border-subdued:var(--gray-200);--bg-hover:var(--gray-100);--bg-pressed:var(--gray-200);--link:#00437C;}
/* Dark is not light inverted. On this ramp three roles land under their floors
on gray-950: --text-subdued gray-400 is Lc 57.7 (gray-300 is 74.4), --border
gray-800 is Lc 4.1 (gray-600 is 25.1), and --text-accent c-300 is Lc 49.8
against a Lc 75 body floor (c-100 is 85.3). The accent is the one that
matters, and the fix is to mirror it to the light end of its own ramp rather
than nudge it one step. */
.mode-dark.emph-plain, .mode-dark .emph-plain {--background:var(--gray-950);--text:var(--gray-50);--text-accent:var(--c-100);--text-subdued:var(--gray-300);--icon:var(--gray-400);--border:var(--gray-600);--border-subdued:var(--gray-700);--bg-hover:var(--gray-900);--bg-pressed:var(--gray-800);--link:var(--link-dark);}
/* ---- Layer 2b: surface elevation ----
Emphasis answers "how loud is this OBJECT". It does not answer "how deep is
this PLANE", and those are different questions: a card and the page behind it
can both be .emph-plain and still must not be the same colour.
Five planes, named by depth rather than by lightness, because which direction
is "up" is a property of the mode and not of the system:
--surface-sunken a well: inset lists, code, map gutters, empty tracks
--surface-page the frame everything sits in
--surface-base the default panel
--surface-raised a card sitting on a panel
--surface-overlay modal, popover, drawer, sheet
The ramp is NOT extended to hold these. --gray-* is a lightness scale and its
eleven steps are consumed by text, borders and icons across the whole system;
adding an 850 and a 925 to solve an elevation problem changes the shape of a
scale that has nothing to do with elevation. Depth gets its own roles, and a
theme points them wherever it likes — at ramp steps, or at its own hexes.
Note what the defaults do at the ends:
LIGHT COLLAPSES AT THE TOP. base, raised and overlay are all gray-50. On oat
paper a brighter card reads as a hole, not as nearer (the same finding that
took --background off #FFFFFF), so in light, elevation is carried by SHADOW.
Three planes are enough.
DARK COLLAPSES AT THE BOTTOM. sunken and page are both gray-950, because
there is nothing below it. In dark, shadow is nearly invisible against a
near-black ground, so elevation has to be carried by LIGHTNESS — and the
moment that is true you need every step distinct.
Which is the whole answer to why roadtrip ships five dark surfaces and the
portfolio ships two: it is not that one of them is over-specified. A
dark-native product spends its entire elevation budget in the bottom three
steps of the ramp, so that is where it needs resolution. */
:root{
--surface-sunken:var(--gray-200);
--surface-page:var(--gray-100);
--surface-base:var(--gray-50);
--surface-raised:var(--gray-50);
--surface-overlay:var(--gray-50);
/* ---- Default object-colour roles ----
The seven roles used to exist ONLY under .emph-*, so any component dropped
on a page with no emphasis class read var(--border) as unresolved — and an
unresolved var invalidates the whole declaration, which is why controls
rendered with no border, switches with an invisible track and rows with no
hover. Declared here as the resting values (an unemphasised object on
paper); every .emph-* and theme still overrides them. */
--background:#FFFFFF;
--text:var(--gray-900);
--text-subdued:var(--gray-600);
--icon:var(--gray-500);
--border:var(--gray-300);
--border-subdued:var(--gray-200);
--border-hover:var(--gray-500);
--bg-hover:var(--gray-100);
--bg-pressed:var(--gray-200);
/* A switch's resting fill is a FILL, not a boundary — borrowing --border for
it is what made the off state disappear. */
--track-off:var(--gray-300);
--track-off-hover:var(--gray-400);
/* ---- Imagery ----
Ratios are tokens, not per-component literals: 4:3 for a place or scene,
16:9 for a still or a hero. 1:1 and the avatar circle are stated by their
variants. Height is decided by the container; the ratio decides the rest. */
--thumb-ratio:4 / 3 /* @kind other */;
--media-ratio:16 / 9 /* @kind other */;
}
/* CONTRACT for themes: supply --gray-* / --c-* ONCE. Either a single dark-native
ramp with no .mode-dark override of your own (roadtrip.css does this — its
frame is always dark, so it never redeclares under .mode-dark), or a light
ramp here that this block derives dark --surface-* / --text-* / etc. from via
var(). A theme that redeclares its own --gray-* / --c-* under .mode-dark gets
inverted TWICE: once by its own override, once by this block reading
whatever ramp is cascaded at that point. One inversion, owned by exactly
one side — never both. */
.mode-dark{
--surface-sunken:var(--gray-950);
--surface-page:var(--gray-950);
--surface-base:var(--gray-900);
--surface-raised:var(--gray-800);
--surface-overlay:var(--gray-800);
--background:var(--gray-950);
--text:var(--gray-50);
--text-subdued:var(--gray-300);
--icon:var(--gray-400);
--border:var(--gray-600);
--border-subdued:var(--gray-800);
--border-hover:var(--gray-400);
--bg-hover:var(--gray-900);
--bg-pressed:var(--gray-800);
--track-off:var(--gray-700);
--track-off-hover:var(--gray-600);
}
/* The roles are applied through classes rather than being baked into
components, because depth is a decision about LAYOUT and the component does
not know what it has been put inside. A .lds-card is a card whether it is on
the page or in a drawer.
Setting --background as well as background is what makes them compose: a
child that paints from --background inherits the plane, and a child carrying
its own .emph-* still wins on itself. */
.surface-sunken{background:var(--surface-sunken);--background:var(--surface-sunken);}
.surface-page{background:var(--surface-page);--background:var(--surface-page);}
.surface-base{background:var(--surface-base);--background:var(--surface-base);}
.surface-raised{background:var(--surface-raised);--background:var(--surface-raised);}
.surface-overlay{background:var(--surface-overlay);--background:var(--surface-overlay);}
/* SUBTLE — the lightest wash of the hue. Reserved for LARGE fields (banners,
cards): a big plane of color needs less saturation to register, so it stays
gentlest to avoid overwhelming the view. */
/* Subtle sits BELOW the ramp's lightest step, not on it. It used c-50 while soft
used c-100 — two adjacent steps roughly 2 Lc apart, so on a card the two levels
were indistinguishable and the scale effectively had four rungs, not five.
There is no step under 50, so the tint is cut with the page's own neutral: half
strength, a whisper of the hue rather than the palest solid version of it. The
border drops a step too, or a c-200 edge reasserts the strength the fill just
gave up. */
.emph-subtle {--background:color-mix(in srgb,var(--c-50) 45%,var(--gray-50));--text:var(--c-800);--text-accent:var(--c-600);--text-subdued:var(--c-800);--icon:var(--c-400);--border:var(--c-100);--border-subdued:color-mix(in srgb,var(--c-100) 55%,var(--gray-50));--bg-hover:var(--c-50);--bg-pressed:var(--c-100);}
/* Same problem inverted: c-900 against soft's c-800. Cut toward the dark neutral. */
.mode-dark.emph-subtle, .mode-dark .emph-subtle {--background:color-mix(in srgb,var(--c-900) 45%,var(--gray-950));--text:var(--c-100);--text-accent:var(--c-200);--text-subdued:var(--c-200);--icon:var(--c-400);--border:var(--c-900);--border-subdued:color-mix(in srgb,var(--c-900) 55%,var(--gray-950));--bg-hover:var(--c-900);--bg-pressed:var(--c-800);}
/* SOFT — light tint for SMALL components (tags, chips, primary buttons). One
step up from subtle: a pill or button is a small field, so it can carry a
touch more color and still read clean. Tags and buttons share this tone. */
.emph-soft {--background:var(--c-100);--text:var(--c-800);--text-accent:var(--c-600);--text-subdued:var(--c-800);--icon:var(--c-500);--border:var(--c-200);--border-subdued:var(--c-100);--bg-hover:var(--c-200);--bg-pressed:var(--c-300);}
.mode-dark.emph-soft, .mode-dark .emph-soft {--background:var(--c-800);--text:var(--c-100);--text-accent:var(--c-200);--text-subdued:var(--c-200);--icon:var(--c-400);--border:var(--c-700);--border-subdued:var(--c-800);--bg-hover:var(--c-700);--bg-pressed:var(--c-600);}
/* STRONG — saturated knockout, white text (APCA fill ≈ Lc 75, label ≥ 77).
c-600 (not c-500) so the white label clears the body floor. */
.emph-strong {--background:var(--c-600);--text:#FFFFFF;--text-accent:var(--c-100);--text-subdued:#FFFFFF;--icon:var(--c-200);--border:var(--c-700);--border-subdued:var(--c-500);--bg-hover:var(--c-500);--bg-pressed:var(--c-700);}
.mode-dark.emph-strong, .mode-dark .emph-strong {--background:var(--c-600);--text:#FFFFFF;--text-accent:var(--c-100);--text-subdued:#FFFFFF;--icon:var(--c-200);--border:var(--c-700);--border-subdued:var(--c-500);--bg-hover:var(--c-500);--bg-pressed:var(--c-700);}
/* STARK — reverse/knockout. On light pages: near-black surface. On dark
pages: intentionally inverted to a near-white surface. Maximum contrast. */
.emph-stark {--background:var(--c-800);--text:#FFFFFF;--text-accent:var(--c-100);--text-subdued:var(--c-200);--icon:var(--c-200);--border:var(--c-700);--border-subdued:var(--c-600);--bg-hover:var(--c-700);--bg-pressed:var(--c-900);}
.mode-dark.emph-stark, .mode-dark .emph-stark {--background:var(--gray-50);--text:var(--gray-900);--text-accent:var(--c-600);--text-subdued:var(--gray-700);--icon:var(--gray-500);--border:var(--gray-200);--border-subdued:var(--gray-100);--bg-hover:var(--gray-100);--bg-pressed:var(--gray-200);}
/* MEDIA — the on-artwork role. Every emphasis above resolves against a surface
colour known at author time. This one does not: it is for chrome that sits on
a photo, video, album art, or a generated gradient, where the backdrop is
decided at runtime and changes as the user scrolls.
The whole role derives from `currentColor`, so the CONSUMER owns exactly one
decision — what the ink should be — and every other role follows. Set it and
the surface, border, hover and pressed states all fall out:
CHOOSING the ink is deliberately out of scope here. That is a sampling
problem (read the backdrop at the element's position, pick the most legible
ink), and it is where the unresolved contrast question lives: palette
enforces WCAG 4.5:1, LDS standardises on APCA Lc, and the two disagree
precisely in the mid-tones where gradients sit. Until that is settled, LDS
ships the half that needs no threshold and leaves the ink to the consumer —
see docs/lew-design-system/palette-adoption-delta.md. The two --on-* helpers
below cover the common static cases without any sampling at all. */
.emph-media{
--text:currentColor;
--text-accent:currentColor;
--icon:currentColor;
--text-subdued:color-mix(in srgb,currentColor 70%,transparent); /* @kind color */
/* The scrim is the OPPOSITE polarity to the ink — white behind dark text,
black behind white text. Defaults to `transparent`, which degrades to a
pure stroke-defined chip, because no single colour is right for both
polarities. Set it with the ink (mediaInkOn returns both), or use the
--on-dark / --on-light helpers, which set the matching pair. */
--media-scrim:transparent;
--background:color-mix(in srgb,var(--media-scrim) 25%,transparent);
--bg-hover:color-mix(in srgb,var(--media-scrim) 34%,transparent);
--bg-pressed:color-mix(in srgb,var(--media-scrim) 42%,transparent);
--border:color-mix(in srgb,currentColor 40%,transparent);
--border-subdued:color-mix(in srgb,currentColor 20%,transparent);
/* glass-specific aliases. .lds-glass reads THESE rather than --background, so
that it stays translucent inside a normal emphasis context — reading the
inherited --background would turn it opaque white inside any .emph-plain. */
--glass-bg:color-mix(in srgb,var(--media-scrim) 25%,transparent);
--glass-border:color-mix(in srgb,currentColor 40%,transparent);
}
/* THE SCRIM MUST BE THE OPPOSITE POLARITY TO THE INK. That is the whole design.
The obvious move — tint the chip with the ink, the way most glass UI does —
is a trap, for two compounding reasons. First, an alpha fill of the ink is
just a dimmer: it moves lightness only, so it desaturates the artwork behind
it. A 10% ink fill lowers backdrop chroma on 5 of 6 backdrops and a 30% fill
costs ~36% of it. Second, and worse, that fill is made of the same colour as
the label sitting on it, so every percent of fill eats the label's own
contrast: worst-case label lands at Lc 66.1 with a 10% ink fill, Lc 50.9
with 30%.
An INVERSE scrim inverts that second effect. It still costs saturation, but
it pushes the backdrop away from the ink, so the label gets easier to read
rather than harder. Measured worst-case across ten backdrops, dark through
near-white through max-chroma primaries:
scrim stroke | edge label chroma kept
0% 60% | 20.6 60.9 100% stroke-only; label misses the floor
15% 45% | 16.3 72.1 89%
25% 40% | 16.2 79.2 81% <- shipped
30% 35% | 15.5 82.3 77%
25/40 is where the label first clears the Lc 75 body floor while keeping the
most artwork chroma, and it lets the stroke soften from 60% to 40%. A pure
stroke at 40% could not carry the chip alone — 40% measured Lc 7.8 on magenta
— but it does not have to, because the scrim now shares edge duty.
The trade is explicit and worth stating: ~19% of the artwork's chroma under
the chip, bought for +18 Lc of label legibility and a visibly softer edge.
A `backdrop-filter: saturate()` pass was considered instead and rejected as a
default: on already-saturated artwork it clips to a no-op on pure primaries,
and on near-max colours it clips asymmetrically and shifts hue 4–10° — it
distorts the artwork on exactly the backdrops that need help most. It stays
available via --media-filter for known-low-chroma artwork. */
/* Media chrome is backdrop-relative, not mode-relative, so .mode-dark must NOT
flip it — a white pill over a bright photo stays wrong in either mode. The
role is intentionally identical in both; the ink is what changes. */
/* Static ink for backdrops you already know the tone of (a dark hero image, a
light product shot). Skips sampling entirely. */
[data-media-ink="dark"]{color:#FFFFFF;--media-scrim:#000000;}
[data-media-ink="light"]{color:var(--gray-900);--media-scrim:#FFFFFF;}
/* Inactive is handled at the end of this file — it has to beat .lds-btn:disabled
on source order, and it must NOT be expressed as faded tokens. See the note
there; the short version is that fading --text and --border independently
makes them multiply. */
/* semantic banner shortcuts (fixed hues regardless of theme brand) */
.banner-success{--background:#E7F6EC;--text:#0B5A26;--border:#B7E4C6;--icon:#0B5A26;}
.banner-error {--background:#FDECEA;--text:#8A1C10;--border:#F5C4BD;--icon:#8A1C10;}
.banner-warning{--background:#FFF8E6;--text:#785800;--border:#FCD874;--icon:#785800;}
.banner-info {--background:#EAF1FF;--text:#173D97;--border:#9DBEFF;--icon:#173D97;}
.mode-dark.banner-success{--background:#0C2417;--text:#8FE0AB;--border:#17492B;}
.mode-dark.banner-error {--background:#2A0F0B;--text:#F3A79A;--border:#5A1A10;}
.mode-dark.banner-warning{--background:#2C2000;--text:#FCD874;--border:#583F00;}
.mode-dark.banner-info {--background:#0A1943;--text:#9DBEFF;--border:#173D97;}
/* ==========================================================================
One Token hue selectors — repoint the brand --c-* scale at a specific
APCA palette hue (from apca-palette.css). Drop on any element together with
an emph-x class to retint it. Because emphasis resolves off --c-*, swapping
the hue also swaps every derived state (default / hover / pressed / inactive).
A HUE IS A COLOUR, NEVER A MEANING. There is no `hue-error` — error is a
meaning, and it lives on the component (`lds-banner--error`), which points
at a hue. Same shape as `lds-btn--primary`: primary is a role that happens
to resolve to the brand hue, not a hue named "primary". See the status map
below for where meanings get bound to colours.
========================================================================== */
/* Status / armed retint — bound on data ATTRIBUTES so the token layer can see
them as scopes. Placed BEFORE the .hue-* block: attribute and class selectors
carry the same specificity, so source order is what lets an author's hue-* or
emph-* still win as a deliberate override. Components emit these attributes;
CSS-only markup must carry data-status="error" (etc.) to get the retint. */
[data-status="error"]{--c-50:var(--red-50);--c-100:var(--red-100);--c-200:var(--red-200);--c-300:var(--red-300);--c-400:var(--red-400);--c-500:var(--red-500);--c-600:var(--red-600);--c-700:var(--red-700);--c-800:var(--red-800);--c-900:var(--red-900);--c-950:var(--red-950);}
[data-status="warning"]{--c-50:var(--orange-50);--c-100:var(--orange-100);--c-200:var(--orange-200);--c-300:var(--orange-300);--c-400:var(--orange-400);--c-500:var(--orange-500);--c-600:var(--orange-600);--c-700:var(--orange-700);--c-800:var(--orange-800);--c-900:var(--orange-900);--c-950:var(--orange-950);}
[data-status="caution"]{--c-50:var(--yellow-50);--c-100:var(--yellow-100);--c-200:var(--yellow-200);--c-300:var(--yellow-300);--c-400:var(--yellow-400);--c-500:var(--yellow-500);--c-600:var(--yellow-600);--c-700:var(--yellow-700);--c-800:var(--yellow-800);--c-900:var(--yellow-900);--c-950:var(--yellow-950);}
[data-status="success"]{--c-50:var(--green-50);--c-100:var(--green-100);--c-200:var(--green-200);--c-300:var(--green-300);--c-400:var(--green-400);--c-500:var(--green-500);--c-600:var(--green-600);--c-700:var(--green-700);--c-800:var(--green-800);--c-900:var(--green-900);--c-950:var(--green-950);}
[data-status="info"]{--c-50:var(--blue-50);--c-100:var(--blue-100);--c-200:var(--blue-200);--c-300:var(--blue-300);--c-400:var(--blue-400);--c-500:var(--blue-500);--c-600:var(--blue-600);--c-700:var(--blue-700);--c-800:var(--blue-800);--c-900:var(--blue-900);--c-950:var(--blue-950);}
[data-armed]{--c-50:var(--red-50);--c-100:var(--red-100);--c-200:var(--red-200);--c-300:var(--red-300);--c-400:var(--red-400);--c-500:var(--red-500);--c-600:var(--red-600);--c-700:var(--red-700);--c-800:var(--red-800);--c-900:var(--red-900);--c-950:var(--red-950);}
.hue-red{--c-50:var(--red-50);--c-100:var(--red-100);--c-200:var(--red-200);--c-300:var(--red-300);--c-400:var(--red-400);--c-500:var(--red-500);--c-600:var(--red-600);--c-700:var(--red-700);--c-800:var(--red-800);--c-900:var(--red-900);--c-950:var(--red-950);}
.hue-orange{--c-50:var(--orange-50);--c-100:var(--orange-100);--c-200:var(--orange-200);--c-300:var(--orange-300);--c-400:var(--orange-400);--c-500:var(--orange-500);--c-600:var(--orange-600);--c-700:var(--orange-700);--c-800:var(--orange-800);--c-900:var(--orange-900);--c-950:var(--orange-950);}
.hue-yellow{--c-50:var(--yellow-50);--c-100:var(--yellow-100);--c-200:var(--yellow-200);--c-300:var(--yellow-300);--c-400:var(--yellow-400);--c-500:var(--yellow-500);--c-600:var(--yellow-600);--c-700:var(--yellow-700);--c-800:var(--yellow-800);--c-900:var(--yellow-900);--c-950:var(--yellow-950);}
.hue-green{--c-50:var(--green-50);--c-100:var(--green-100);--c-200:var(--green-200);--c-300:var(--green-300);--c-400:var(--green-400);--c-500:var(--green-500);--c-600:var(--green-600);--c-700:var(--green-700);--c-800:var(--green-800);--c-900:var(--green-900);--c-950:var(--green-950);}
.hue-cyan{--c-50:var(--cyan-50);--c-100:var(--cyan-100);--c-200:var(--cyan-200);--c-300:var(--cyan-300);--c-400:var(--cyan-400);--c-500:var(--cyan-500);--c-600:var(--cyan-600);--c-700:var(--cyan-700);--c-800:var(--cyan-800);--c-900:var(--cyan-900);--c-950:var(--cyan-950);}
.hue-blue{--c-50:var(--blue-50);--c-100:var(--blue-100);--c-200:var(--blue-200);--c-300:var(--blue-300);--c-400:var(--blue-400);--c-500:var(--blue-500);--c-600:var(--blue-600);--c-700:var(--blue-700);--c-800:var(--blue-800);--c-900:var(--blue-900);--c-950:var(--blue-950);}
.hue-violet{--c-50:var(--violet-50);--c-100:var(--violet-100);--c-200:var(--violet-200);--c-300:var(--violet-300);--c-400:var(--violet-400);--c-500:var(--violet-500);--c-600:var(--violet-600);--c-700:var(--violet-700);--c-800:var(--violet-800);--c-900:var(--violet-900);--c-950:var(--violet-950);}
.hue-pink{--c-50:var(--pink-50);--c-100:var(--pink-100);--c-200:var(--pink-200);--c-300:var(--pink-300);--c-400:var(--pink-400);--c-500:var(--pink-500);--c-600:var(--pink-600);--c-700:var(--pink-700);--c-800:var(--pink-800);--c-900:var(--pink-900);--c-950:var(--pink-950);}
.hue-gray{--c-50:var(--gray-50);--c-100:var(--gray-100);--c-200:var(--gray-200);--c-300:var(--gray-300);--c-400:var(--gray-400);--c-500:var(--gray-500);--c-600:var(--gray-600);--c-700:var(--gray-700);--c-800:var(--gray-800);--c-900:var(--gray-900);--c-950:var(--gray-950);}
/* ==========================================================================
Layer 2b: status → hue map — THE ONLY PLACE A MEANING TOUCHES A COLOUR.
Five statuses, bound here and nowhere else. Repointing caution from yellow to
orange is a one-line edit that reaches every component at once, and no
consumer markup changes — which is the whole reason the binding is central
rather than repeated inside each component.
Bound at :where() (specificity 0) so an author's emph-* or hue-* still wins
as a deliberate fine-tune override.
Adding a status-bearing component means adding its selector to these five
lists. That is intentional friction: it keeps the set of components that may
speak in status names small and visible in one place.
`info` resolves to BLUE. It previously meant two different colours depending
on which layer you asked: `hue-info` was gray, `lds-banner--info` was blue.
Gray lost — a gray "info" field is indistinguishable from ordinary chrome,
and neutral information is already the default surface. The old `helpful`
name is gone with it; it was a second name for the same blue.
========================================================================== */
/* Bound on a data ATTRIBUTE, not a component class: the binding is a token
scope (it only aliases --c-*), so it lives where the token layer can see it.
Components emit data-status alongside their status modifier class; CSS-only
markup must carry data-status="error" (etc.) to get the retint. */
/* ==========================================================================
Layer 3: components — reference only the semantic vars + theme knobs
========================================================================== */
/* ---- Button ---- */
/* A link rendered as a button carries NO underline. The underline is how running
text marks a link that has no other affordance; a button already has a fill, a
border, a height and a hit area doing that job, so the rule is redundant
decoration cutting through a centred label.
The plain button is the exception, and the reason is the same rule read the
other way: .lds-btn--ghost has no fill and no border, so with the underline
gone there is nothing left marking it. It keeps the line. */
a.lds-btn{text-decoration:none;}
a.lds-btn--ghost{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:0.18em;}
.lds-btn{
font-family:var(--th-ui);
/* A button label is CHROME, so it takes the label composite. It was on
--text-body (18px) — the prose role — which made every button read a step
larger than the UI around it. */
font-size:calc(var(--text-control) * var(--density));
letter-spacing:var(--tracking-label-sm);
font-weight:var(--weight-medium);
padding:calc(9px * var(--density)) calc(17px * var(--density));
border-radius:var(--pill);
border:1px solid transparent;
cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:var(--control-xl);
transition:filter var(--dur-fast) var(--ease-standard),
background var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.lds-btn:active{transform:translateY(1px);}
.lds-btn:disabled{opacity:.38;pointer-events:none;}
.lds-btn:focus-visible{outline:2px solid var(--text-accent);outline-offset:2px;}
.lds-btn--fill{background:var(--c-600);color:#fff;border-color:var(--c-600);box-shadow:var(--btn-shadow,none);}
.lds-btn--fill:hover{filter:brightness(1.08);}
.lds-btn--outline{background:transparent;color:var(--text);border-color:var(--border);}
.lds-btn--outline:hover{background:var(--bg-hover);}
.lds-btn--ghost{background:transparent;color:var(--text-accent);border-color:transparent;}
.lds-btn--ghost:hover{background:var(--bg-hover);}
.lds-btn--sm{font-size:calc(var(--text-control-sm) * var(--density));padding:calc(6px * var(--density)) calc(12px * var(--density));min-height:var(--control-md);}
.lds-btn--lg{font-size:calc(var(--text-control-lg) * var(--density));padding:calc(12px * var(--density)) calc(22px * var(--density));min-height:var(--control-2xl);}
/* Prefix / suffix icon. Sized in em so it tracks the button's own step instead
of needing a rule per size: 1.15em lands on 15/16/18px across sm/base/lg. */
.lds-btn__icon{flex:0 0 auto;width:1.15em;height:1.15em;}
.lds-btn__icon svg,.lds-btn__icon .lds-icon{width:100%;height:100%;display:block;color:currentColor;}
/* Two-line button: an action plus the detail that qualifies it. The subtitle is
a tint of the label rather than a token colour, so it stays legible on every
variant, hue and mode without a rule per combination. */
.lds-btn__text{display:flex;flex-direction:column;align-items:inherit;gap:1px;min-width:0;}
.lds-btn__subtitle{
font-size:max(11px,0.85em);font-weight:var(--weight-regular);
color:color-mix(in srgb,currentColor 72%,transparent);
letter-spacing:0;
}
/* A label longer than its button wraps and clamps at three lines rather than
ellipsing at one — a truncated verb phrase ("Reserve for th\u2026") is unreadable,
and a button that grows without limit breaks the row it sits in. */
.lds-btn__label{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
overflow:hidden;overflow-wrap:anywhere;
}
/* With a subtitle, or a wrapping label, the content stack is left-aligned and
the button grows vertically \u2014 centred text reads as a heading once it is two
lines tall. */
.lds-btn--stacked{
align-items:flex-start;justify-content:flex-start;text-align:start;
padding-block:calc(10px * var(--density));
min-height:var(--control-2xl);
}
/* icon-only — drops the horizontal padding so the button is square at exactly
/* Icon-only. Square, and never below --target-min: a 24px icon in a 44px box is
the smallest honest touch target, and the label lives in aria-label.
--target-min. Without this an icon button inherits the label padding and
comes out oblong. Give it an accessible name (aria-label / title). */
.lds-btn--icon{padding:0;min-width:var(--target-min);min-height:var(--target-min);justify-content:center;}
.lds-btn--icon.lds-btn--sm{min-width:var(--control-md);min-height:var(--control-md);}
.lds-btn--icon.lds-btn--lg{min-width:var(--control-2xl);min-height:var(--control-2xl);}
/* The icon in an icon-only button is one step up from the inline 1.15em: with no
label beside it, the glyph IS the label. */
.lds-btn--icon .lds-btn__icon{width:var(--icon-size);height:var(--icon-size);}
/* FAB — an icon-only button promoted to the one persistent action on a screen.
Round, elevated, and 56px: larger than the touch floor because it floats over
content rather than sitting in a row, so it has to win the glance. One per
screen. It is a SIZE and a SHAPE, not a new colour — the variant still decides
the paint, so a FAB inherits the same primary the rest of the app uses. */
.lds-btn--fab{
padding:0;border-radius:var(--radius-pill);
width:56px;height:56px;min-width:56px;min-height:56px;
box-shadow:var(--shadow-lg);
}
.lds-btn--fab.lds-btn--sm{width:var(--target-min);height:var(--target-min);min-width:var(--target-min);min-height:var(--target-min);}
.lds-btn--fab.lds-btn--lg{width:64px;height:64px;min-width:64px;min-height:64px;}
.lds-btn--fab .lds-btn__icon{width:var(--icon-size-lg);height:var(--icon-size-lg);}
.lds-btn--fab:active{transform:none;}
/* An extended FAB keeps the pill and takes a label — for a first-run screen
where the icon alone would not say what the action is. */
.lds-btn--fab.lds-btn--extended{width:auto;min-width:0;padding:0 22px;gap:10px;}
/* ==========================================================================
Links — the inline kind. A link inside prose is TEXT, so it stays in the
reading face and carries an underline: the distinction has to survive
grayscale print and red-green colour blindness, which is why the accent green
is not the link colour. --link is resolved per emphasis above, so a link on a
knockout surface flips to the light blue instead of getting an exception.
A link that needs to look like a button is a BUTTON with an href — same three
sizes, same heights, same paint. Do not restyle a link to imitate one: the
two would drift the first time the button changes.
========================================================================== */
a,.lds-link{
color:var(--link);
text-decoration:underline;
text-decoration-thickness:from-font;
text-underline-offset:0.18em;
cursor:pointer;
}
/* Hover and pressed are carried by COLOUR, not by weight. Thickening the rule to
2px was the obvious move and the wrong one: it reflows the underline against
the descenders and reads as chunky at body size, in a face whose from-font
underline is already tuned to it. The line stays put and the ink deepens. */
a:hover,.lds-link:hover{color:var(--link-hover);}
a:active,.lds-link:active{color:var(--link-pressed);}
/* Keyboard: focus-visible only, so a mouse click never draws a ring. The offset
keeps the ring off the glyphs, and the radius stops it cutting the corner of a
link that wraps across two lines. */
a:focus-visible,.lds-link:focus-visible{
outline:2px solid var(--link);outline-offset:2px;border-radius:2px;
text-decoration-color:currentColor;
}
/* Quiet: a link in dense chrome, where a blue run of text would out-shout the
row it sits in. Keeps the underline — that is the part doing the work. */
.lds-link--quiet{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);}
.lds-link--quiet:hover{color:var(--link);text-decoration-color:currentColor;}
.lds-link--quiet:active{color:var(--link-pressed);}
/* Standalone: a link on its own line, not inside a sentence — "See all watches".
Takes the UI face at a control step, because it is chrome, and drops the
underline in favour of a trailing chevron. */
.lds-link--standalone{
display:inline-flex;align-items:center;gap:6px;
font-family:var(--th-ui);font-size:var(--text-control);font-weight:var(--weight-medium);
text-decoration:none;min-height:var(--control-md);
}
/* The standalone link has no resting underline, so hover has to supply one —
here the line appearing IS the state change, at the same from-font weight. */
.lds-link--standalone:hover{color:var(--link-hover);text-decoration:underline;text-decoration-thickness:from-font;}
.lds-link--standalone:active{color:var(--link-pressed);}
/* Its chevron leans into the direction of travel on hover. */
.lds-link--standalone:hover .lds-icon{transform:translateX(2px);}
.lds-link--standalone .lds-icon{transition:transform var(--motion-fast,120ms) ease;}
.lds-link--standalone .lds-icon{width:var(--icon-size-sm);height:var(--icon-size-sm);color:currentColor;}
/* Emphasis-driven buttons — the one-token-pure path. A primary button is
just a strong-emphasis surface: