/*
* Site styles. There is no build step: this file is served exactly as written,
* so everything the site needs is here or in the site's own additions below.
*
* COLOUR, TYPE AND SPACE ARE DIALS (#426). The first section is Dials
* (github.com/joops/dials), copied verbatim between its begin and end
* markers. It works out every colour, text size, space size and
* corner from a few values called dials. This site sets its own dials in ONE
* short block straight after the section, "This site's dials", and that block
* is the only place in the file where a colour or a scale value is typed.
*
* - Change the look by changing a dial: --brand for the brand colour,
* --size-min/--size-max and --ratio-min/--ratio-max for the type scale,
* --leading-body for line height, --space-min/--space-max and
* --space-density for spacing, --radius-base for corners,
* --font-body/--font-heading for faces.
* - Everything else reads a token: --surface*, --text*, --border*, --link,
* --focus, --solid/--on-solid/--soft/--on-soft/--line (and the named
* groups --brand-*, --secondary-*, --tertiary-*, --success-* ...), --size-*,
* --leading, --space-*, --radius-*, --border-width-*. Never a hex, rgb(),
* hsl() or named colour, never a px/rem length, and never a typed line
* height, anywhere else. Weights and letter spacing are the site's own:
* a weight is a unitless number, letter spacing is in em.
* - The rules are in refs/design/DESIGN.md ("Dials"). Every dial, token
* and class is listed in the reference for the version in the section's
* first line: github.com/joops/dials/blob/v0.4.1/docs/tokens.md. A
* gradient, a wash or a quiet coloured border is a pattern built from
* tokens (that reference, "Patterns"), never a token of its own.
* check-system.sh holds the section to _template's copy word for word,
* and fails a raw colour outside the dials block.
*/
/* ═══ Dials ═══ dials:begin ═════════════════════════════════════════════
* Dials v0.4.2, VERBATIM. Never edit anything between this marker and the
* end marker: check-system.sh fails the site if its copy differs from
* _template's by a word. Each marker appears once; never write either in
* prose. Set dials in "This site's dials" below; an upgrade
* of Dials is a template change plus a migration of every site.
* ═══════════════════════════════════════════════════════════════════════ */
/*! Dials v0.4.2 | MIT | https://github.com/joops/dials */
/* Dials: an AI-first CSS framework. This file is dials-colour.css, then
dials-scale.css, then the fallback for older browsers; dials-base.css is optional.
Its defaults are the Default theme: the device's own faces, nothing to load.
The Dials house theme is themes/dials.css.
*/
/* ============================================================
Dials: colour (dials-colour.css)
Dials: seven colours and a few numbers, the only typed values.
Derived: surfaces, text, lines and groups, worked out live with
color-mix() and relative colour, in light and dark.
Groups: .is-{group} points the ungrouped tokens at a group.
Dials live on :root (and :host); the derived chain is declared on
:root, [data-dials] and :host, so setting a dial on any
[data-dials] element re-derives every token inside it.
Needs color-mix(), light-dark() and relative colour. Don't
register these with @property: they must resolve where they're
used, which is what makes .is-dark bands work.
============================================================ */
:root, :host {
/* ---- Colour dials: any CSS colour, preferably HSL ---- */
--brand: hsl(221 83% 53%); /* the main colour: links, focus, primary buttons */
--secondary: hsl(262 52% 55%); /* a second colour: highlights and secondary actions (was --accent) */
--success: hsl(142 64% 38%); /* status: done, saved, live */
--warning: hsl(38 92% 50%); /* status: check this */
--danger: hsl(0 72% 51%); /* status: errors and destructive actions */
--info: hsl(199 89% 42%); /* status: neutral news */
--grey: hsl(220 9% 50%); /* the hue and strength of the tint in paper and ink */
/* ---- Number dials ---- */
--balance: 0; /* 1: every fill at --fill-lightness, so they carry equal weight. 0: exactly as set */
--fill-lightness: 0.52; /* the shared OKLCH lightness used when --balance is 1 */
--dark-lift: 0.06; /* how much lighter the fills are in dark */
--tint-strength: 10%; /* how much colour goes into a soft tint */
--tint-vividness: 1; /* 1-3: how saturated soft tints are, for crisper pastels */
--text-contrast: 0; /* 0-30: strengthens body, muted and quiet text and strong borders, for paper and ink that sit close together */
--white-text-until: 0.179; /* fills below this luminance get white text, above it black. 0.179 gives each fill whichever contrasts more; held between 0.175 and 0.18333, where both still give 4.5:1: black needs (L + 0.05) / 0.05 >= 4.5, so L >= 0.175; white needs 1.05 / (L + 0.05) >= 4.5, so L <= 1.05 / 4.5 - 0.05 = 0.18333 */
/* ---- Paper and ink: near-white and near-black, tinted by --grey at these OKLCH lightnesses.
To use exact colours instead, set --paper-light, --paper-dark, --ink-light and/or
--ink-dark (unset by default) to any colour. ---- */
--paper-lightness: 0.985; /* page background in light */
--paper-dark-lightness: 0.17; /* page background in dark */
--ink-lightness: 0.2; /* strongest text in light */
--ink-dark-lightness: 0.95; /* strongest text in dark */
}
/* Follow the visitor's light or dark setting. To force one, set
:root { color-scheme: light; } (or dark) after dials.css. */
:root { color-scheme: light dark; }
:root, [data-dials], :host {
/* ---- Internal: paper, ink and the six fills, worked out from the dials ---- */
--dl-paper-light: var(--paper-light, oklab(from var(--grey) var(--paper-lightness) calc(a * 0.12) calc(b * 0.12)));
--dl-paper-dark: var(--paper-dark, oklab(from var(--grey) var(--paper-dark-lightness) calc(a * 0.15) calc(b * 0.15)));
--dl-ink-light: var(--ink-light, oklab(from var(--grey) var(--ink-lightness) calc(a * 0.25) calc(b * 0.25)));
--dl-ink-dark: var(--ink-dark, oklab(from var(--grey) var(--ink-dark-lightness) calc(a * 0.12) calc(b * 0.12)));
--dl-paper: light-dark(var(--dl-paper-light), var(--dl-paper-dark));
--dl-ink: light-dark(var(--dl-ink-light), var(--dl-ink-dark));
--dl-paper-grey: oklab(from var(--dl-paper) l 0 0); /* paper without its tint: soft tints mix into this, so they keep their own hue */
--dl-secondary-dial: var(--accent, var(--secondary)); /* --accent is --secondary's old name: while a site still sets it, it wins */
--dl-brand-base: oklab(from var(--brand) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--dl-secondary-base: oklab(from var(--dl-secondary-dial) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--dl-success-base: oklab(from var(--success) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--dl-warning-base: oklab(from var(--warning) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--dl-danger-base: oklab(from var(--danger) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--dl-info-base: oklab(from var(--info) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--dl-brand: light-dark(var(--dl-brand-base), oklab(from var(--dl-brand-base) calc(l + var(--dark-lift)) a b));
--dl-secondary: light-dark(var(--dl-secondary-base), oklab(from var(--dl-secondary-base) calc(l + var(--dark-lift)) a b));
--dl-success: light-dark(var(--dl-success-base), oklab(from var(--dl-success-base) calc(l + var(--dark-lift)) a b));
--dl-warning: light-dark(var(--dl-warning-base), oklab(from var(--dl-warning-base) calc(l + var(--dark-lift)) a b));
--dl-danger: light-dark(var(--dl-danger-base), oklab(from var(--dl-danger-base) calc(l + var(--dark-lift)) a b));
--dl-info: light-dark(var(--dl-info-base), oklab(from var(--dl-info-base) calc(l + var(--dark-lift)) a b));
/* ---- Surfaces ---- */
--surface: var(--dl-paper); /* the page background */
--surface-raised: oklab(from var(--dl-paper) calc(l + 0.03) calc(a * 0.5) calc(b * 0.5)); /* cards, fields, popovers */
--surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper)); /* wells, table headers, quiet panels */
--surface-sunken: color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper)); /* code, inset areas, disabled fills */
--surface-overlay: color-mix(in oklab, black 45%, transparent); /* the scrim behind a dialog */
/* ---- Text ---- */
--text-strong: var(--dl-ink); /* headings, labels, emphasis */
--text: color-mix(in oklab, var(--dl-ink) calc(86% + var(--text-contrast) * 0.4%), var(--dl-paper)); /* body text */
--text-muted: color-mix(in oklab, var(--dl-ink) calc(70% + var(--text-contrast) * 1%), var(--dl-paper)); /* secondary text */
--text-quiet: color-mix(in oklab, var(--dl-ink) calc(64% + var(--text-contrast) * 1.2%), var(--dl-paper)); /* captions, dates, placeholders */
--text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper)); /* disabled controls: exempt from contrast rules */
--link: var(--brand-on-soft); /* links: 4.5:1 on every surface */
--link-hover: light-dark(color(from var(--dl-brand-hover) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-hover) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1)); /* links on hover: a step stronger (the link 0.08 darker in OKLCH lightness in light, lighter in dark), and on to 7:1 if that's short */
/* ---- Lines and effects ---- */
--border-quiet: color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper)); /* dividers that should barely show */
--border: color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper)); /* card and table borders: decorative */
--border-strong: color-mix(in oklab, var(--dl-ink) calc(46% + var(--text-contrast) * 1%), var(--dl-paper)); /* field and control borders: 3:1 on surfaces */
--focus: var(--brand-on-soft); /* the focus ring: opaque, 4.5:1 on surfaces */
--selection: color-mix(in oklab, var(--dl-brand) 22%, var(--dl-paper)); /* selected text background */
--shadow-color: light-dark(color-mix(in oklab, black 10%, transparent), color-mix(in oklab, black 45%, transparent)); /* the colour of shadows */
--shadow-s: 0 1px 3px var(--shadow-color); /* a slight lift: buttons, chips */
--shadow-m: 0 4px 14px var(--shadow-color); /* cards */
--shadow-l: 0 12px 32px var(--shadow-color); /* popovers, menus, dialogs */
/* ---- Hover and pressed: the second half of a color-mix(), from Web Awesome.
Use as color-mix(in oklch, var(--solid), var(--mix-hover)). The text colour's lightness is flipped
in OKLab, keeping its a and b: grey text has no hue a browser will read back (Chrome 157 reads it
as none, which paints pink), so this reads none. ---- */
--mix-hover: oklab(from currentColor calc(1 - l) a b) 12%; /* hover: away from the text colour */
--mix-active: oklab(from currentColor calc(1 - l) a b) 22%; /* pressed: further still */
/* ---- Groups: brand, secondary, neutral, success, warning, danger, info. Five roles each:
solid a solid fill
on-solid text on it: white or black, whichever contrasts more (its sRGB luminance, as painted, vs --white-text-until)
soft a tinted background: the colour, held at L 0.7 or lighter in light (0.6 or darker in dark), mixed in OKLab
into paper with its own tint taken out, so a blue soft stays blue on cream paper. Its vividness scales
the mix's a and b, never its chroma and hue: a tint is too pale to carry a hue a browser will read back
(Chrome 157 reads it as none, which paints pink), so no colour here reads a hue from a mix or from paper
on-soft text on soft, and coloured text on the page: the fill, moved only as far as 4.5:1 needs
line borders, icons and large text (24px, or 18.66px bold, and up): the dial, moved only as far as 3:1 needs
Coloured text and lines follow one rule: keep the colour, and move it only as far as its
contrast target needs, on the least contrasting background it sits on: its own soft tint,
--surface-lowered or --surface-raised (--surface always lies between them). Only its
linear-light RGB is scaled, which keeps the channels' ratios, so hue and saturation stay
(in dark, until a channel reaches 1).
--link-hover is the same rule at 7:1, starting from the link a step stronger.
Y the colour's luminance, 0.2126 r + 0.7152 g + 0.0722 b in linear sRGB (clipped to sRGB first)
Yb that background's luminance, as painted (clipped to sRGB)
T the target, plus 0.1 headroom so painting in 8 bits can't round it under the line
light: Yt = (Yb + 0.05) / (T + 0.1) - 0.05; scale r, g and b by min(1, Yt / Y)
dark: Yt = (T + 0.1) * (Yb + 0.05) - 0.05; scale r, g and b by max(1, Yt / Y), each capped
at 1; if a capped channel leaves it short, mix towards white only as far as Yt needs:
by (Yt - Y1) / (1 - Y1), where Y1 is the luminance after scaling
A colour that already passes keeps its exact value. CSS works out a relative colour from
one colour's channels only, so the steps carry their numbers in colours:
--dl-surfaces-y the luminance of --surface-lowered in green, of --surface-raised in blue
--dl-{group}-under plus the soft tint's in red, mixed 50/50: Yb is min(2r, 4g, 4b) in light, max in dark
--dl-{group}-text, the colour, mixed 50/50 with a black whose alpha is s Yt, where s is 3 in
--dl-{group}-line, light (Yt is at most 0.29 there) and 1 in dark: scaling it up means Firefox
--dl-brand-hover rounding a mix's alpha to three decimals costs a third as much. Mixing
premultiplies, so the mix has alpha a = (1 + s Yt) / 2 and channels c / 2a:
the colour's channels are r * 2a, and Yt is (2a - 1) / s
on-soft, line, hover unpack both and scale, as above ---- */
--dl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))));
--dl-brand-under: color-mix(in srgb-linear, color(from var(--brand-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
--dl-brand-text: color-mix(in srgb-linear, color(from var(--dl-brand-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--dl-brand-line: color-mix(in srgb-linear, color(from var(--brand) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--brand-solid: var(--dl-brand);
--brand-on-solid: color(from var(--dl-brand) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--brand-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-brand) max(l, 0.7) a b), oklab(from var(--dl-brand) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--brand-on-soft: light-dark(color(from var(--dl-brand-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--brand-line: light-dark(color(from var(--dl-brand-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-brand-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--dl-secondary-under: color-mix(in srgb-linear, color(from var(--secondary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
--dl-secondary-text: color-mix(in srgb-linear, color(from var(--dl-secondary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--dl-secondary-line: color-mix(in srgb-linear, color(from var(--dl-secondary-dial) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-secondary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--secondary-solid: var(--dl-secondary);
--secondary-on-solid: color(from var(--dl-secondary) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--secondary-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-secondary) max(l, 0.7) a b), oklab(from var(--dl-secondary) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--secondary-on-soft: light-dark(color(from var(--dl-secondary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--secondary-line: light-dark(color(from var(--dl-secondary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-secondary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--neutral-solid: var(--dl-ink);
--neutral-on-solid: var(--dl-paper);
--neutral-soft: var(--surface-lowered);
--neutral-on-soft: var(--text);
--neutral-line: var(--border);
--dl-success-under: color-mix(in srgb-linear, color(from var(--success-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
--dl-success-text: color-mix(in srgb-linear, color(from var(--dl-success-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--dl-success-line: color-mix(in srgb-linear, color(from var(--success) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-success-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--success-solid: var(--dl-success);
--success-on-solid: color(from var(--dl-success) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--success-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-success) max(l, 0.7) a b), oklab(from var(--dl-success) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--success-on-soft: light-dark(color(from var(--dl-success-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--success-line: light-dark(color(from var(--dl-success-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-success-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--dl-warning-under: color-mix(in srgb-linear, color(from var(--warning-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
--dl-warning-text: color-mix(in srgb-linear, color(from var(--dl-warning-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--dl-warning-line: color-mix(in srgb-linear, color(from var(--warning) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-warning-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--warning-solid: var(--dl-warning);
--warning-on-solid: color(from var(--dl-warning) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--warning-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-warning) max(l, 0.7) a b), oklab(from var(--dl-warning) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--warning-on-soft: light-dark(color(from var(--dl-warning-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--warning-line: light-dark(color(from var(--dl-warning-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-warning-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--dl-danger-under: color-mix(in srgb-linear, color(from var(--danger-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
--dl-danger-text: color-mix(in srgb-linear, color(from var(--dl-danger-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--dl-danger-line: color-mix(in srgb-linear, color(from var(--danger) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-danger-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--danger-solid: var(--dl-danger);
--danger-on-solid: color(from var(--dl-danger) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--danger-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-danger) max(l, 0.7) a b), oklab(from var(--dl-danger) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--danger-on-soft: light-dark(color(from var(--dl-danger-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--danger-line: light-dark(color(from var(--dl-danger-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-danger-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--dl-info-under: color-mix(in srgb-linear, color(from var(--info-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--dl-surfaces-y));
--dl-info-text: color-mix(in srgb-linear, color(from var(--dl-info-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--dl-info-line: color-mix(in srgb-linear, color(from var(--info) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--dl-info-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--info-solid: var(--dl-info);
--info-on-solid: color(from var(--dl-info) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--info-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--dl-info) max(l, 0.7) a b), oklab(from var(--dl-info) min(l, 0.6) a b)) var(--tint-strength), var(--dl-paper-grey)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--info-on-soft: light-dark(color(from var(--dl-info-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--info-line: light-dark(color(from var(--dl-info-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--dl-info-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--dl-brand-hover: color-mix(in srgb-linear, color(from light-dark(oklab(from var(--brand-on-soft) calc(l - 0.08) a b), oklab(from var(--brand-on-soft) calc(l + 0.08) a b)) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (7 + 0.1) - 0.05), 1))), color(from var(--dl-brand-under) srgb-linear 0 0 0 / calc(clamp(0, (7 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
/* ---- Ungrouped: components use these; .is-{group} points them at a group ---- */
--solid: var(--brand-solid);
--on-solid: var(--brand-on-solid);
--soft: var(--brand-soft);
--on-soft: var(--brand-on-soft);
--line: var(--brand-line);
/* ---- Deprecated: --accent's tokens, renamed --secondary-*. They still work; rename them ---- */
--accent-solid: var(--secondary-solid); /* deprecated: use --secondary-solid */
--accent-on-solid: var(--secondary-on-solid); /* deprecated: use --secondary-on-solid */
--accent-soft: var(--secondary-soft); /* deprecated: use --secondary-soft */
--accent-on-soft: var(--secondary-on-soft); /* deprecated: use --secondary-on-soft */
--accent-line: var(--secondary-line); /* deprecated: use --secondary-line */
}
.is-brand { --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); }
.is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
.is-neutral { --solid: var(--neutral-solid); --on-solid: var(--neutral-on-solid); --soft: var(--neutral-soft); --on-soft: var(--neutral-on-soft); --line: var(--neutral-line); }
.is-success { --solid: var(--success-solid); --on-solid: var(--success-on-solid); --soft: var(--success-soft); --on-soft: var(--success-on-soft); --line: var(--success-line); }
.is-warning { --solid: var(--warning-solid); --on-solid: var(--warning-on-solid); --soft: var(--warning-soft); --on-soft: var(--warning-on-soft); --line: var(--warning-line); }
.is-danger { --solid: var(--danger-solid); --on-solid: var(--danger-on-solid); --soft: var(--danger-soft); --on-soft: var(--danger-on-soft); --line: var(--danger-line); }
.is-info { --solid: var(--info-solid); --on-solid: var(--info-on-solid); --soft: var(--info-soft); --on-soft: var(--info-on-soft); --line: var(--info-line); }
.is-accent { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); } /* deprecated: use .is-secondary */
/* A light or dark band: its own scheme, and its own background and text worked out in it */
.is-light { color-scheme: light; background-color: var(--surface); color: var(--text); }
.is-dark { color-scheme: dark; background-color: var(--surface); color: var(--text); }
/* ============================================================
Dials: type and space (dials-scale.css)
A few dials set every text size and every space size, the way
Utopia (utopia.fyi) works them out, but the maths runs in the
browser: change a dial and the whole scale follows. Leading is
worked out the same way, for whatever size it's used at. This
file sets no type on any element: only
dials-base.css does that. Dials live on
:root (and :host); the derived scale is declared on :root,
[data-dials] and :host, so a dial set on a [data-dials] element
re-derives the sizes inside it.
============================================================ */
:root, :host {
/* ---- Dials ---- */
--screen-min: 360; /* the screen widths the scale runs between, in px */
--screen-max: 1240;
--size-min: 16; /* body text at the narrowest and widest screens, in px */
--size-max: 18;
--ratio-min: 1.2; /* each step is this much bigger than the last: 1.2 minor third, */
--ratio-max: 1.25; /* 1.25 major third, 1.333 perfect fourth, 1.5 fifth, 1.618 golden */
--space-min: var(--size-min); /* --space-s at each end, in px: follows body text */
--space-max: var(--size-max); /* size unless you set a number */
--space-density: 1; /* scales every space size: 0.8 compact, 1.25 roomy */
--radius-base: 10; /* corner radius of cards and fields, in px (a number, not a length) */
/* Faces: set per site, and load them yourself (each theme file names its Google Fonts link) */
--font-body: ui-sans-serif, system-ui, sans-serif; /* body text and controls */
--font-heading: ui-sans-serif, system-ui, sans-serif; /* headings */
--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code, kbd, samp, pre */
/* Border widths: every border and outline uses one of these */
--border-width-s: 1px; /* hairlines: cards, fields, tables */
--border-width-m: 2px; /* emphasis; outline offsets */
--border-width-l: 3px; /* focus rings, quote bars, active tabs */
/* ---- Leading: one dial for the rhythm of the type ---- */
/* --leading-body: 1.5; line height at body size (--size-0), unitless. Every larger size keeps the same gap between lines, so it gets proportionally tighter; the space after paragraphs is one body line */
/* --font-accent: var(--font-body); a third face, for ledes, pull quotes or buttons; read it as var(--font-accent, var(--font-body)) */
}
:root, [data-dials], :host {
/* ---- Internal: worked out from the dials, never edited by hand ---- */
--dl-screen-range: calc(var(--screen-max) - var(--screen-min));
--dl-fluid: calc((100vw - var(--screen-min) * 1px) / var(--dl-screen-range) * 16); /* 0 at the narrowest, 16px at the widest */
--dl-min-0: calc(var(--size-min) / 16);
--dl-max-0: calc(var(--size-max) / 16);
--dl-min--1: calc(var(--dl-min-0) / var(--ratio-min));
--dl-max--1: calc(var(--dl-max-0) / var(--ratio-max));
--dl-min--2: calc(var(--dl-min--1) / var(--ratio-min));
--dl-max--2: calc(var(--dl-max--1) / var(--ratio-max));
--dl-min-1: calc(var(--dl-min-0) * var(--ratio-min));
--dl-max-1: calc(var(--dl-max-0) * var(--ratio-max));
--dl-min-2: calc(var(--dl-min-1) * var(--ratio-min));
--dl-max-2: calc(var(--dl-max-1) * var(--ratio-max));
--dl-min-3: calc(var(--dl-min-2) * var(--ratio-min));
--dl-max-3: calc(var(--dl-max-2) * var(--ratio-max));
--dl-min-4: calc(var(--dl-min-3) * var(--ratio-min));
--dl-max-4: calc(var(--dl-max-3) * var(--ratio-max));
--dl-min-5: calc(var(--dl-min-4) * var(--ratio-min));
--dl-max-5: calc(var(--dl-max-4) * var(--ratio-max));
--dl-min-6: calc(var(--dl-min-5) * var(--ratio-min));
--dl-max-6: calc(var(--dl-max-5) * var(--ratio-max));
--dl-min-7: calc(var(--dl-min-6) * var(--ratio-min));
--dl-max-7: calc(var(--dl-max-6) * var(--ratio-max));
--dl-min-8: calc(var(--dl-min-7) * var(--ratio-min));
--dl-max-8: calc(var(--dl-max-7) * var(--ratio-max));
/* ---- Font sizes: --size-0 is body text; each number up or down is one step of the ratio,
running in a straight line between its two ends ---- */
--size--2: clamp(min(var(--dl-min--2), var(--dl-max--2)) * 1rem, var(--dl-min--2) * 1rem + (var(--dl-max--2) - var(--dl-min--2)) * var(--dl-fluid), max(var(--dl-min--2), var(--dl-max--2)) * 1rem);
--size--1: clamp(min(var(--dl-min--1), var(--dl-max--1)) * 1rem, var(--dl-min--1) * 1rem + (var(--dl-max--1) - var(--dl-min--1)) * var(--dl-fluid), max(var(--dl-min--1), var(--dl-max--1)) * 1rem);
--size-0: clamp(min(var(--dl-min-0), var(--dl-max-0)) * 1rem, var(--dl-min-0) * 1rem + (var(--dl-max-0) - var(--dl-min-0)) * var(--dl-fluid), max(var(--dl-min-0), var(--dl-max-0)) * 1rem);
--size-1: clamp(min(var(--dl-min-1), var(--dl-max-1)) * 1rem, var(--dl-min-1) * 1rem + (var(--dl-max-1) - var(--dl-min-1)) * var(--dl-fluid), max(var(--dl-min-1), var(--dl-max-1)) * 1rem);
--size-2: clamp(min(var(--dl-min-2), var(--dl-max-2)) * 1rem, var(--dl-min-2) * 1rem + (var(--dl-max-2) - var(--dl-min-2)) * var(--dl-fluid), max(var(--dl-min-2), var(--dl-max-2)) * 1rem);
--size-3: clamp(min(var(--dl-min-3), var(--dl-max-3)) * 1rem, var(--dl-min-3) * 1rem + (var(--dl-max-3) - var(--dl-min-3)) * var(--dl-fluid), max(var(--dl-min-3), var(--dl-max-3)) * 1rem);
--size-4: clamp(min(var(--dl-min-4), var(--dl-max-4)) * 1rem, var(--dl-min-4) * 1rem + (var(--dl-max-4) - var(--dl-min-4)) * var(--dl-fluid), max(var(--dl-min-4), var(--dl-max-4)) * 1rem);
--size-5: clamp(min(var(--dl-min-5), var(--dl-max-5)) * 1rem, var(--dl-min-5) * 1rem + (var(--dl-max-5) - var(--dl-min-5)) * var(--dl-fluid), max(var(--dl-min-5), var(--dl-max-5)) * 1rem);
--size-6: clamp(min(var(--dl-min-6), var(--dl-max-6)) * 1rem, var(--dl-min-6) * 1rem + (var(--dl-max-6) - var(--dl-min-6)) * var(--dl-fluid), max(var(--dl-min-6), var(--dl-max-6)) * 1rem);
--size-7: clamp(min(var(--dl-min-7), var(--dl-max-7)) * 1rem, var(--dl-min-7) * 1rem + (var(--dl-max-7) - var(--dl-min-7)) * var(--dl-fluid), max(var(--dl-min-7), var(--dl-max-7)) * 1rem); /* display type */
--size-8: clamp(min(var(--dl-min-8), var(--dl-max-8)) * 1rem, var(--dl-min-8) * 1rem + (var(--dl-max-8) - var(--dl-min-8)) * var(--dl-fluid), max(var(--dl-min-8), var(--dl-max-8)) * 1rem); /* display type: the top of the scale */
/* ---- Leading: worked out for the size of the element it's used on ---- */
/* --leading is a length: apply it on each element that sets a font size (dials-base.css applies it to every
element), never on a wrapper for its children to inherit, where it would pass on one fixed length. */
--dl-leading-body: var(--leading-body, 1.5);
/* the body's gap between lines at every larger size (1em + the body gap), so bigger text gets proportionally
tighter lines; smaller text keeps the body ratio; no size goes below 1.05 */
--leading: max(1.05em, min(var(--dl-leading-body) * 1em, 1em + (var(--dl-leading-body) - 1) * var(--size-0))); /* line height for the size it's on: the same gap between lines as body text at every larger size */
--space-paragraph: calc(var(--dl-leading-body) * var(--size-0)); /* one body line: the space after paragraphs and other blocks; headings take two above and half below */
/* ---- Space: multiples of the space base (Utopia's t-shirt sizes), times the density ---- */
--dl-space-min: calc(var(--space-min) / 16 * var(--space-density));
--dl-space-max: calc(var(--space-max) / 16 * var(--space-density));
--space-3xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.25 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.25rem));
--space-2xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem));
--space-xs: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem));
--space-s: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem));
--space-m: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem));
--space-l: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
--space-xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
--space-2xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
--space-3xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem));
--space-4xl: clamp(calc(var(--dl-space-min) * 8rem), calc(var(--dl-space-min) * 8rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 8) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem));
/* One-up pairs: small on phones, the next size up on desktops */
--space-3xs-2xs: clamp(calc(var(--dl-space-min) * 0.25rem), calc(var(--dl-space-min) * 0.25rem + (var(--dl-space-max) * 0.5 - var(--dl-space-min) * 0.25) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.5rem));
--space-2xs-xs: clamp(calc(var(--dl-space-min) * 0.5rem), calc(var(--dl-space-min) * 0.5rem + (var(--dl-space-max) * 0.75 - var(--dl-space-min) * 0.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 0.75rem));
--space-xs-s: clamp(calc(var(--dl-space-min) * 0.75rem), calc(var(--dl-space-min) * 0.75rem + (var(--dl-space-max) * 1 - var(--dl-space-min) * 0.75) * var(--dl-fluid)), calc(var(--dl-space-max) * 1rem));
--space-s-m: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 1.5 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 1.5rem));
--space-m-l: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
--space-l-xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
--space-xl-2xl: clamp(calc(var(--dl-space-min) * 3rem), calc(var(--dl-space-min) * 3rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 3) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
--space-2xl-3xl: clamp(calc(var(--dl-space-min) * 4rem), calc(var(--dl-space-min) * 4rem + (var(--dl-space-max) * 6 - var(--dl-space-min) * 4) * var(--dl-fluid)), calc(var(--dl-space-max) * 6rem));
--space-3xl-4xl: clamp(calc(var(--dl-space-min) * 6rem), calc(var(--dl-space-min) * 6rem + (var(--dl-space-max) * 8 - var(--dl-space-min) * 6) * var(--dl-fluid)), calc(var(--dl-space-max) * 8rem));
/* Skip pairs, for gutters and section padding that need a bigger swing */
--space-s-l: clamp(calc(var(--dl-space-min) * 1rem), calc(var(--dl-space-min) * 1rem + (var(--dl-space-max) * 2 - var(--dl-space-min) * 1) * var(--dl-fluid)), calc(var(--dl-space-max) * 2rem));
--space-m-xl: clamp(calc(var(--dl-space-min) * 1.5rem), calc(var(--dl-space-min) * 1.5rem + (var(--dl-space-max) * 3 - var(--dl-space-min) * 1.5) * var(--dl-fluid)), calc(var(--dl-space-max) * 3rem));
--space-l-2xl: clamp(calc(var(--dl-space-min) * 2rem), calc(var(--dl-space-min) * 2rem + (var(--dl-space-max) * 4 - var(--dl-space-min) * 2) * var(--dl-fluid)), calc(var(--dl-space-max) * 4rem));
/* ---- Corners ---- */
--radius-s: calc(var(--radius-base) * 0.5px);
--radius-m: calc(var(--radius-base) * 1px);
--radius-l: calc(var(--radius-base) * 1.6px);
--radius-pill: 999px;
}
/* ============================================================
Dials: the fallback (src/fallback.css, built into the end of dials.css)
For browsers with color-mix() but without relative colour or
light-dark(): Chrome and Edge 111-122, Safari 16.2-17, Firefox
113-127. They can't work out the derived chain above, so this
block works every public colour token out again from the same
dials, with color-mix() alone. It comes after the chain and uses
the same selectors, so it wins there; a site's own file, loaded
after dials.css, still wins over it. It never sets a dial.
Approximations, held to the same contrast as the chain (the
contrast check's --fallback mode):
- The page is light. .is-dark bands are dark, .is-light bands light.
- Paper and ink come from --grey at fixed mixes, so the four
lightness dials, --balance, --dark-lift, --tint-vividness and
--text-contrast have no effect. --paper-light and friends do.
- on-solid text can't follow the fill's luminance: each group has a
fixed choice, and its fill is pulled a fixed amount towards the
other end so the text keeps 4.5:1 in every Dials theme. White on
brand, secondary, danger and info, whose fills are darkened; black
on success, whose fill is lightened, and warning, as set.
- Coloured text and lines can't move only as far as their target
needs: on-soft is the dial mixed a fixed amount into ink (so --link
and --focus too), line a smaller amount, and --link-hover further
still. The amounts hold 4.5:1 and 3:1 on every surface and soft
tint, for every theme and for extreme dials, so they over-shoot for
most colours. Ink is near-black on a light page and near-white in an
.is-dark band, so the same mix works in both.
- No calc() and no percentages computed inside color-mix(): only
literal percentages and dials that are one (--tint-strength).
============================================================ */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
/* ---- Internal: the scheme switches, literal percentages a band can flip ---- */
:root, :host, .is-light {
color-scheme: light;
--dl-fb-dark: 0%; /* how much of the dark paper and ink to use */
--dl-fb-raise: 38%; /* how much white lifts --surface-raised */
--dl-fb-shadow: 10%; /* the strength of shadows */
}
.is-dark {
color-scheme: dark;
--dl-fb-dark: 100%;
--dl-fb-raise: 4%;
--dl-fb-shadow: 45%;
}
/* Bands are declared here too, so every token is worked out again in a band's own scheme */
:root, [data-dials], :host, .is-light, .is-dark {
/* ---- Internal: paper, ink and the six fills ---- */
--dl-paper-light: var(--paper-light, color-mix(in oklab, var(--grey) 20%, white));
--dl-paper-dark: var(--paper-dark, color-mix(in oklab, var(--grey) 30%, black));
--dl-ink-light: var(--ink-light, color-mix(in oklab, var(--grey) 34%, black));
--dl-ink-dark: var(--ink-dark, color-mix(in oklab, var(--grey) 17%, white));
--dl-paper: color-mix(in oklab, var(--dl-paper-dark) var(--dl-fb-dark), var(--dl-paper-light));
--dl-ink: color-mix(in oklab, var(--dl-ink-dark) var(--dl-fb-dark), var(--dl-ink-light));
--dl-brand: color-mix(in oklab, var(--brand) 72%, black);
--dl-secondary: color-mix(in oklab, var(--accent, var(--secondary)) 67%, black);
--dl-success: color-mix(in oklab, var(--success) 85%, white);
--dl-warning: var(--warning);
--dl-danger: color-mix(in oklab, var(--danger) 78%, black);
--dl-info: color-mix(in oklab, var(--info) 61%, black);
/* ---- Surfaces ---- */
--surface: var(--dl-paper);
--surface-raised: color-mix(in oklab, white var(--dl-fb-raise), var(--dl-paper));
--surface-lowered: color-mix(in oklab, var(--dl-ink) 4%, var(--dl-paper));
--surface-sunken: color-mix(in oklab, var(--dl-ink) 8%, var(--dl-paper));
--surface-overlay: color-mix(in oklab, black 45%, transparent);
/* ---- Text: a step stronger than the chain's defaults, to cover --text-contrast ---- */
--text-strong: var(--dl-ink);
--text: color-mix(in oklab, var(--dl-ink) 94%, var(--dl-paper));
--text-muted: color-mix(in oklab, var(--dl-ink) 89%, var(--dl-paper));
--text-quiet: color-mix(in oklab, var(--dl-ink) 86%, var(--dl-paper));
--text-disabled: color-mix(in oklab, var(--dl-ink) 38%, var(--dl-paper));
--link: var(--brand-on-soft);
--link-hover: color-mix(in oklab, var(--brand) 20%, var(--dl-ink));
/* ---- Lines and effects ---- */
--border-quiet: color-mix(in oklab, var(--dl-ink) 7%, var(--dl-paper));
--border: color-mix(in oklab, var(--dl-ink) 13%, var(--dl-paper));
--border-strong: color-mix(in oklab, var(--dl-ink) 64%, var(--dl-paper));
--focus: var(--brand-on-soft);
--selection: color-mix(in oklab, var(--brand) 22%, var(--dl-paper));
--shadow-color: color-mix(in oklab, black var(--dl-fb-shadow), transparent);
--shadow-s: 0 1px 3px var(--shadow-color);
--shadow-m: 0 4px 14px var(--shadow-color);
--shadow-l: 0 12px 32px var(--shadow-color);
--mix-hover: black 12%;
--mix-active: black 22%;
/* ---- Groups: soft mixed into paper, on-soft and line mixed towards ink ---- */
--brand-solid: var(--dl-brand);
--brand-on-solid: white;
--brand-soft: color-mix(in oklab, var(--brand) var(--tint-strength), var(--dl-paper));
--brand-on-soft: color-mix(in oklab, var(--brand) 26%, var(--dl-ink));
--brand-line: color-mix(in oklab, var(--brand) 40%, var(--dl-ink));
--secondary-solid: var(--dl-secondary);
--secondary-on-solid: white;
--secondary-soft: color-mix(in oklab, var(--accent, var(--secondary)) var(--tint-strength), var(--dl-paper));
--secondary-on-soft: color-mix(in oklab, var(--accent, var(--secondary)) 26%, var(--dl-ink));
--secondary-line: color-mix(in oklab, var(--accent, var(--secondary)) 40%, var(--dl-ink));
--neutral-solid: var(--dl-ink);
--neutral-on-solid: var(--dl-paper);
--neutral-soft: var(--surface-lowered);
--neutral-on-soft: var(--text);
--neutral-line: var(--border);
--success-solid: var(--dl-success);
--success-on-solid: black;
--success-soft: color-mix(in oklab, var(--success) var(--tint-strength), var(--dl-paper));
--success-on-soft: color-mix(in oklab, var(--success) 26%, var(--dl-ink));
--success-line: color-mix(in oklab, var(--success) 40%, var(--dl-ink));
--warning-solid: var(--dl-warning);
--warning-on-solid: black;
--warning-soft: color-mix(in oklab, var(--warning) var(--tint-strength), var(--dl-paper));
--warning-on-soft: color-mix(in oklab, var(--warning) 26%, var(--dl-ink));
--warning-line: color-mix(in oklab, var(--warning) 40%, var(--dl-ink));
--danger-solid: var(--dl-danger);
--danger-on-solid: white;
--danger-soft: color-mix(in oklab, var(--danger) var(--tint-strength), var(--dl-paper));
--danger-on-soft: color-mix(in oklab, var(--danger) 26%, var(--dl-ink));
--danger-line: color-mix(in oklab, var(--danger) 40%, var(--dl-ink));
--info-solid: var(--dl-info);
--info-on-solid: white;
--info-soft: color-mix(in oklab, var(--info) var(--tint-strength), var(--dl-paper));
--info-on-soft: color-mix(in oklab, var(--info) 26%, var(--dl-ink));
--info-line: color-mix(in oklab, var(--info) 40%, var(--dl-ink));
/* ---- Ungrouped ---- */
--solid: var(--brand-solid);
--on-solid: var(--brand-on-solid);
--soft: var(--brand-soft);
--on-soft: var(--brand-on-soft);
--line: var(--brand-line);
/* ---- Deprecated: the old names for the secondary group ---- */
--accent-solid: var(--secondary-solid);
--accent-on-solid: var(--secondary-on-solid);
--accent-soft: var(--secondary-soft);
--accent-on-soft: var(--secondary-on-soft);
--accent-line: var(--secondary-line);
}
/* the group classes again, so they still win on a [data-dials] element or a band */
.is-brand { --solid: var(--brand-solid); --on-solid: var(--brand-on-solid); --soft: var(--brand-soft); --on-soft: var(--brand-on-soft); --line: var(--brand-line); }
.is-secondary { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
.is-neutral { --solid: var(--neutral-solid); --on-solid: var(--neutral-on-solid); --soft: var(--neutral-soft); --on-soft: var(--neutral-on-soft); --line: var(--neutral-line); }
.is-success { --solid: var(--success-solid); --on-solid: var(--success-on-solid); --soft: var(--success-soft); --on-soft: var(--success-on-soft); --line: var(--success-line); }
.is-warning { --solid: var(--warning-solid); --on-solid: var(--warning-on-solid); --soft: var(--warning-soft); --on-soft: var(--warning-on-soft); --line: var(--warning-line); }
.is-danger { --solid: var(--danger-solid); --on-solid: var(--danger-on-solid); --soft: var(--danger-soft); --on-soft: var(--danger-on-soft); --line: var(--danger-line); }
.is-info { --solid: var(--info-solid); --on-solid: var(--info-on-solid); --soft: var(--info-soft); --on-soft: var(--info-on-soft); --line: var(--info-line); }
.is-accent { --solid: var(--secondary-solid); --on-solid: var(--secondary-on-solid); --soft: var(--secondary-soft); --on-soft: var(--secondary-on-soft); --line: var(--secondary-line); }
}
/* Generated by tools/fallback.mjs from dials.css (src/colour.css 192f968f0b78d4df): the defaults in
the light scheme. Don't edit. The last resort, for browsers without color-mix() (Chrome and Edge
before 111, Safari before 16.2, Firefox before 113, all 2022 or older): they can't work anything
out, so every colour token is flat and they get the house colours, light only. Colour dials have no
effect there; type and space work as normal. */
@supports not (color: color-mix(in srgb, red, blue)) {
:root, [data-dials], :host, .is-light, .is-dark {
color-scheme: light;
--surface: #f9fafc;
--surface-raised: #feffff;
--surface-lowered: #eef0f2;
--surface-sunken: #e4e5e7;
--surface-overlay: rgb(0 0 0 / 45%);
--text-strong: #151619;
--text: #2f3033;
--text-muted: #505154;
--text-quiet: #5d5e61;
--text-disabled: #999a9d;
--link: #2362e9;
--link-hover: #0743c2;
--border-quiet: #e7e8ea;
--border: #d7d8db;
--border-strong: #86878a;
--focus: #2362e9;
--selection: #c9dbfc;
--shadow-color: rgb(0 0 0 / 10%);
--shadow-s: 0 1px 3px rgb(0 0 0 / 10%);
--shadow-m: 0 4px 14px rgb(0 0 0 / 10%);
--shadow-l: 0 12px 32px rgb(0 0 0 / 10%);
--mix-hover: black 12%;
--mix-active: black 22%;
--brand-solid: #2463eb;
--brand-on-solid: #ffffff;
--brand-soft: #e9f1ff;
--brand-on-soft: #2362e9;
--brand-line: #2463eb;
--secondary-solid: #7c51c8;
--secondary-on-solid: #ffffff;
--secondary-soft: #f1eefc;
--secondary-on-soft: #7c51c8;
--secondary-line: #7c51c8;
--neutral-solid: #151619;
--neutral-on-solid: #f9fafc;
--neutral-soft: #eef0f2;
--neutral-on-soft: #2f3033;
--neutral-line: #d7d8db;
--success-solid: #239f50;
--success-on-solid: #000000;
--success-soft: #eaf4eb;
--success-on-soft: #197c3d;
--success-line: #229c4f;
--warning-solid: #f59f0a;
--warning-on-solid: #000000;
--warning-soft: #faf1e7;
--warning-on-soft: #976003;
--warning-line: #bd7906;
--danger-solid: #dc2828;
--danger-on-solid: #ffffff;
--danger-soft: #ffece9;
--danger-on-soft: #d02525;
--danger-line: #dc2828;
--info-solid: #0c8eca;
--info-on-solid: #000000;
--info-soft: #e9f2f9;
--info-on-soft: #0773a4;
--info-line: #0c8eca;
--accent-solid: #7c51c8;
--accent-on-solid: #ffffff;
--accent-soft: #f1eefc;
--accent-on-soft: #7c51c8;
--accent-line: #7c51c8;
}
}
/* ═══ dials:end (Dials) ═════════════════════════════════════════════════ */
/* ═══ This site's dials ═════════════════════════════════════════════════
* The ONLY place a colour or a scale value is typed. A site differs from
* another in these values and nowhere else. The values below reproduce the
* template's look before Dials (its --palette-*, --hue-* and --l-* dials);
* change them to match the practice.
*
* Colours are HSL, which is the easiest to reason about ("the same teal, a
* bit darker"); any CSS colour works, so a brand's own hex can go straight
* into --brand. Dials works the rest out in OKLCH, and keeps every text
* colour at 4.5:1 and every control border and focus ring at 3:1, in light
* and dark.
* ═══════════════════════════════════════════════════════════════════════ */
/* Cairns West Medical Centre: the logo's green and blue, a sky blue for decoration, Crimson Pro and Figtree.
* Carried over from the signed-off offer preview (built on Dials v0.4.0), which typed only these dials. */
:root {
/* Logo green #6C946C (hsl 120 16% 50%), deepened to 42% lightness so white text on its fill passes 4.5:1 */
--brand: hsl(120 16% 42%);
/* Logo blue #5078B4 (hsl 216 40% 51%), deepened to 49% so white text on its fill passes 4.5:1 */
--secondary: hsl(216 40% 49%);
/* The logo's wordmark green #2C482C, the template's third group (not used on the homepage) */
--tertiary: hsl(120 24% 23%);
--tertiary-is-light: 0%;
/* A green-leaning grey: paper reads as a soft leaf-white, dark bands as deep forest */
--grey: hsl(115 14% 45%);
/* Paper a touch below white, so raised cards lift off it; ink near the logo's wordmark green */
--paper-lightness: 0.972;
--ink-lightness: 0.24;
/* Type: Crimson Pro for headings, Figtree (a friendly sans) for reading; loaded in each page's head */
--font-heading: "Crimson Pro", Georgia, serif;
--font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
--size-min: 17;
--size-max: 19;
/* A wide ratio at the top so the hero headline can be truly big */
--ratio-min: 1.2;
--ratio-max: 1.3;
--leading-body: 1.55;
--space-min: 16;
--space-max: 22;
/* Soft, generous corners; the leaf frames take theirs from the logo instead */
--radius-base: 16;
}
/* ── The colour scheme ────────────────────────────────────────────────────
* The page follows the device's light or dark setting: Dials' own
* color-scheme: light dark (mf-websites#431). The visitor can override it
* with the switcher in partials/header.html, which sets (none = match the device); partials/
* scheme-head.html applies a stored choice before first paint.
*
* Only where Dials can draw a dark page, under Dials' own condition:
* elsewhere (Dials' fallback) the page is always light, the switcher stays
* hidden, and a forced dark scheme would only darken the browser's own
* controls on a light page.
*
* A site that should only ever be light (or dark) sets color-scheme on :root
* in its dials block instead, and deletes the switcher and the scheme-head
* include: a visitor must not be offered a choice the site does not honour. */
@supports (color: oklch(from red l c h)) and (color: light-dark(red, red)) {
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] { color-scheme: dark; }
}
/* ── The tertiary group ───────────────────────────────────────────────────
* A third brand colour, typically doing button and CTA work, that is neither
* a tint of the brand nor a status colour (practices routinely have one:
* "Button Brown", "Morning Orange"). Dials has no third brand group, so the
* template adds one with the same five roles, worked out the way Dials v0.2.0
* works out its own groups (each formula is Dials' brand formula with the
* tertiary colour in it), from public tokens only. Set --tertiary above;
* never set these. class="is-tertiary" points --solid and friends at it,
* like .is-secondary. Declared on bands too, so a band's group follows the
* band's own scheme.
*
* --tertiary-on-soft the fill, moved only as far as 4.5:1 needs on the
* least contrasting of its soft tint, --surface-lowered
* and --surface-raised; a colour that passes is kept
* --tertiary-line the dial, moved only as far as 3:1 needs, the same way
*
* Dials carries the numbers those two need in its internal --dl-* plumbing,
* which nothing outside Dials may read, so the template works the same
* numbers out again from public tokens in its own --tpl-* properties: the
* luminance of --surface-lowered and --surface-raised (Dials' --dl-surfaces-y)
* and of the soft tint, and the colour carrying its target. They are the
* template's plumbing: never use or set a --tpl-* property anywhere else. */
:root, [data-dials], .is-light, .is-dark {
--tpl-tertiary-base: oklab(from var(--tertiary) calc(l + (var(--fill-lightness) - l) * var(--balance)) a b);
--tertiary-solid: light-dark(var(--tpl-tertiary-base), oklab(from var(--tpl-tertiary-base) calc(l + var(--dark-lift)) a b));
--tertiary-on-solid: color(from var(--tertiary-solid) srgb-linear calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) calc(clamp(0, (clamp(0.175, var(--white-text-until), 0.18333) - (0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))) * 1000000, 1)) / 1);
--tertiary-soft: oklab(from color-mix(in oklab, light-dark(oklab(from var(--tertiary-solid) max(l, 0.7) a b), oklab(from var(--tertiary-solid) min(l, 0.6) a b)) var(--tint-strength), oklab(from var(--surface) l 0 0)) l calc(a * var(--tint-vividness)) calc(b * var(--tint-vividness)));
--tpl-surfaces-y: color-mix(in srgb-linear, color(from var(--surface-lowered) srgb-linear 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0), color(from var(--surface-raised) srgb-linear 0 0 calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1))));
--tpl-tertiary-under: color-mix(in srgb-linear, color(from var(--tertiary-soft) srgb-linear calc(0.2126 * clamp(0, r, 1) + 0.7152 * clamp(0, g, 1) + 0.0722 * clamp(0, b, 1)) 0 0), var(--tpl-surfaces-y));
--tpl-tertiary-text: color-mix(in srgb-linear, color(from var(--tpl-tertiary-base) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (4.5 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (4.5 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--tpl-tertiary-line: color-mix(in srgb-linear, color(from var(--tertiary) srgb-linear clamp(0, r, 1) clamp(0, g, 1) clamp(0, b, 1) / 1), light-dark(color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, 3 * ((min(2 * r, 4 * g, 4 * b) + 0.05) / (3 + 0.1) - 0.05), 1))), color(from var(--tpl-tertiary-under) srgb-linear 0 0 0 / calc(clamp(0, (3 + 0.1) * (max(2 * r, 4 * g, 4 * b) + 0.05) - 0.05, 1)))));
--tertiary-on-soft: light-dark(color(from var(--tpl-tertiary-text) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-text) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
--tertiary-line: light-dark(color(from var(--tpl-tertiary-line) srgb-linear calc(r * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(g * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) calc(b * 2 * alpha * min(1, (2 * alpha - 1) / 3 / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / 1), color(from color(from var(--tpl-tertiary-line) srgb-linear min(1, r * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, g * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) min(1, b * 2 * alpha * max(1, (2 * alpha - 1) / max(0.000001, 2 * alpha * (0.2126 * r + 0.7152 * g + 0.0722 * b)))) / alpha) srgb-linear calc(r + (1 - r) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(g + (1 - g) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) calc(b + (1 - b) * clamp(0, (2 * alpha - 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)) / max(0.000001, 1 - (0.2126 * r + 0.7152 * g + 0.0722 * b)), 1)) / 1));
}
.is-tertiary { --solid: var(--tertiary-solid); --on-solid: var(--tertiary-on-solid); --soft: var(--tertiary-soft); --on-soft: var(--tertiary-on-soft); --line: var(--tertiary-line); }
/* The tertiary group in older browsers: without relative colour or
* light-dark() (iOS 16 and 17, Safari before 18, Chrome and Edge before 123,
* Firefox before 128) the derivation above cannot be worked out, and Dials'
* own fallback covers only Dials' groups. So, the way Dials' fallback does
* its groups, under the same condition and with the same selectors as the
* derivation: the five roles again with color-mix(in oklab, ...) alone, from
* --tertiary and the paper (--surface) and ink (--text-strong) Dials'
* fallback has already worked out. As in Dials v0.2.0's fallback, on-soft is
* the colour mixed 26% into ink and the line 40% into ink; neither can move
* only as far as it needs there, so both over-shoot for most colours.
*
* Text on the fill can't follow the fill's luminance there, so, as in Dials'
* fallback, it is a fixed choice with the fill moved to suit it. Dials fixes
* the choice per group (white on --brand pulled 72% towards black, black on
* --warning as set); the tertiary is whatever colour the site gives it, so
* the site fixes it with --tertiary-is-light in its dials block, a literal
* percentage like Dials' own fallback switches: 0% (the default) is white on
* the fill pulled 72% towards black, as Dials does --brand; 100% is black on
* --tertiary as set, as Dials does --warning. A light --tertiary at 0% gets
* white on a mid fill below 4.5:1, a dark one at 100% black on a dark fill:
* check-contrast.mjs --fallback says which a site needs. */
@supports not ((color: oklch(from red l c h)) and (color: light-dark(red, red))) {
:root, [data-dials], .is-light, .is-dark {
--tertiary-solid: color-mix(in oklab, var(--tertiary) var(--tertiary-is-light, 0%), color-mix(in oklab, var(--tertiary) 72%, black));
--tertiary-on-solid: color-mix(in oklab, black var(--tertiary-is-light, 0%), white);
--tertiary-soft: color-mix(in oklab, var(--tertiary) var(--tint-strength), var(--surface));
--tertiary-on-soft: color-mix(in oklab, var(--tertiary) 26%, var(--text-strong));
--tertiary-line: color-mix(in oklab, var(--tertiary) 40%, var(--text-strong));
}
}
/* ── The template's own tokens ────────────────────────────────────────────
* What Dials does not cover: the measure, the grid, the shared control
* corner, the tap target, layers and motion. None of them is a colour, a text
* size or a space size. Line height is Dials' --leading; weights and letter
* spacing are written on the elements that use them, as plain numbers and em
* (the template's old --leading-*, --tracking-* and --weight-* are in "Old
* names" below). */
:root {
/* --- Weight -------------------------------------------------------- */
/* THREE WEIGHTS, DELIBERATELY: 400 body, 600 emphasis (nav, labels,
* buttons, eyebrows, strong) and 700 headline. A fourth needs a reason:
* the face has a visibly distinct cut AND the three are not creating
* enough contrast. A flat hierarchy is almost always a spacing or size
* problem, not a weight problem. */
/* --- Measure ------------------------------------------------------- */
--measure: 65ch; /* body copy, where a container asks for it (.measure) */
--measure-tight: 45ch; /* card and caption copy */
/* --- Grid ---------------------------------------------------------- */
/* Deliberately minimal: the container and gutter are fluid, placement is
* left to each layout. Use .u-container and .u-grid below. */
--grid-max-width: 77.5rem;
--grid-gutter: var(--space-s-l);
--grid-columns: 12;
/* --- Corners beyond Dials' three ----------------------------------- */
--radius-xs: calc(var(--radius-base) * 0.333px); /* tags, inline chips, the focus ring: a third of --radius-m, so it follows --radius-base */
--radius-round: 50%; /* avatars */
--control-radius: var(--radius-s); /* buttons AND fields: a site sets this once, both follow */
/* --- Touch targets ------------------------------------------------- */
/* The smallest box a finger hits reliably: 44px (WCAG 2.5.5, Apple's
* HIG). A fixed dimension rather than spacing, so it does not scale. */
--target-min: 2.75rem;
/* --- Inset shadows, from Dials' --shadow-color ------------------------ */
--shadow-inner-s: inset 0 1px 2px 0 var(--shadow-color);
--shadow-inner-m: inset 0 2px 6px 0 var(--shadow-color);
/* --- Layers -------------------------------------------------------- */
/* Six values, so z-index is never invented at the call site. */
--layer-behind: -1; /* decorative washes sitting behind content */
--layer-base: 1;
--layer-raised: 2; /* hover cards, sticky rows */
--layer-nav: 3; /* sticky header */
--layer-overlay: 4; /* dropdowns, popovers */
--layer-modal: 5; /* dialogs and their backdrop */
--layer-top: 2147483647;/* skip links, live-region alerts */
/* --- Motion -------------------------------------------------------- */
--duration-fast: 120ms; /* hover, focus */
--duration-base: 220ms; /* most transitions */
--duration-slow: 400ms; /* entrances */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--reveal-distance: 1.5rem;
}
/* ═══ Old names ═══ aliases:begin ═══════════════════════════════════════
* The template's token names before Dials (#426), each pointing at the Dials
* token that replaces it, so markup, the Form controls section and any site
* layer written against them keep working until #427 migrates the live
* sites. NEVER use one in new work: use the name on the right. Delete this
* whole block (down to aliases:end) once nothing reads any of them.
*
* Declared on [data-dials] and the .is-light/.is-dark bands as well as
* :root, so a re-themed scope's or a band's aliases follow its own dials and
* scheme, as Dials' own tokens do (its fallback works them out again there). Names Dials took over with a new meaning are NOT
* here: --surface is now the PAGE (the old raised --surface is
* --surface-raised), --secondary is the second brand colour's dial (it used
* to be its fill: that is --secondary-solid), --accent is that dial's old
* Dials name (deprecated in Dials v0.2.0: never set it), --success/--warning/
* --danger/--info/--tertiary are dials (the fill is --success-solid ...), and --border, --border-strong, --space-*,
* --radius-s/m/l, --shadow-* and --font-* are Dials' own. The --u-*,
* --palette-*, --hue-*, --chroma-*, --l-* and --scheme dials are gone: set
* the Dials dials instead. */
:root, [data-dials], .is-light, .is-dark {
--primary: var(--brand-solid);
--primary-hover: light-dark(oklab(from var(--brand-solid) calc(l - 0.07) a b), oklab(from var(--brand-solid) calc(l + 0.07) a b));
--primary-light: oklab(from var(--brand-solid) calc(l + 0.11) a b);
--primary-muted: color-mix(in oklab, var(--brand-solid) 15%, var(--surface));
--primary-pale: var(--brand-soft);
--on-primary: var(--brand-on-solid);
--secondary-hover: light-dark(oklab(from var(--secondary-solid) calc(l - 0.07) a b), oklab(from var(--secondary-solid) calc(l + 0.07) a b));
--secondary-light: oklab(from var(--secondary-solid) calc(l + 0.11) a b);
--secondary-pale: var(--secondary-soft);
--on-secondary: var(--secondary-on-solid);
--tertiary-hover: light-dark(oklab(from var(--tertiary-solid) calc(l - 0.07) a b), oklab(from var(--tertiary-solid) calc(l + 0.07) a b));
--tertiary-pale: var(--tertiary-soft);
--on-tertiary: var(--tertiary-on-solid);
--accent-dark: var(--primary-hover);
--accent-pale: var(--brand-soft);
--success-pale: var(--success-soft);
--warning-pale: var(--warning-soft);
--danger-pale: var(--danger-soft);
--info-pale: var(--info-soft);
--ink-strong: var(--text-strong);
--ink: var(--text);
--ink-mid: var(--text-muted);
--ink-soft: var(--text-quiet);
--bg: var(--surface);
--on-bg: var(--text);
--on-surface: var(--text);
--step--2: var(--size--2);
--step--1: var(--size--1);
--step-0: var(--size-0);
--step-1: var(--size-1);
--step-2: var(--size-2);
--step-3: var(--size-3);
--step-4: var(--size-4);
--step-5: var(--size-5);
--step-6: var(--size-6);
--step-7: var(--size-7);
--step-8: var(--size-8);
--border-thin: var(--border-width-s);
--border-medium: var(--border-width-m);
--border-thick: var(--border-width-l);
/* The template's type ladder before Dials v0.3 (#436), FROZEN at its old
* values, so a site layer written against it renders exactly as it did.
* They do not follow Dials, and the template reads none of them: line
* height is var(--leading), and weights and letter spacing are plain
* values on each element. check-system.sh accepts these values only
* exactly as written here. */
--weight-400: 400;
--weight-600: 600;
--weight-700: 700;
--leading-xs: 1.05;
--leading-s: 1.18;
--leading-m: 1.3;
--leading-l: 1.5;
--leading-xl: 1.6;
--tracking-xs: -0.02em;
--tracking-s: -0.01em;
--tracking-m: 0;
--tracking-l: 0.04em;
--tracking-xl: 0.08em;
}
/* ═══ aliases:end (Old names) ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
* RESET
*
* Josh Comeau's Custom CSS Reset (joshwcomeau.com/css/custom-css-reset/),
* lightly adapted. Normalises browser defaults so the base layer below is
* building on the same ground in every browser. Leave this alone; make
* design decisions in the base layer and the tokens above it.
* ═══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/* Skip link. craft.md requires one as the first element in ; without a
* rule here it renders as a visible link above the header on every site. It is
* off-screen until focused, then a real control with a visible focus ring. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: var(--layer-top, 2147483647);
padding: var(--space-xs) var(--space-s);
background: var(--solid);
color: var(--on-solid);
text-decoration: none;
border-radius: 0 0 var(--radius-xs) 0;
}
.skip-link:focus, .skip-link:focus-visible {
left: 0; /* the ring is the global one, in Form controls & focus */
}
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
-webkit-font-smoothing: antialiased; /* line height: the base layer's body rule, from --leading-body */
}
/* Media is block-level and never overflows its container. */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* Form controls inherit typography rather than using browser chrome. */
:where(input, button, textarea, select) { font: inherit; } /* zero specificity: "Form controls" below must win */
/* Long words and URLs wrap instead of forcing a horizontal scrollbar. */
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
/* A new stacking context on the root, so app-level layers cannot escape. */
#root, #__next { isolation: isolate; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════════════════════════════════════════════════════════════════
* ELEMENT BASE LAYER
*
* Bare elements are styled here so a page is correct with no classes at
* all. Without this, an unclassed
falls back to the browser default
* and whoever writes the page patches it with an inline style — which is
* how a site ends up with a different heading treatment per page.
*
* Every heading has a matching .h1-.h6 class. Use the ELEMENT for document
* structure (SEO, screen readers, outline) and the CLASS for appearance,
* so an
can look like an eyebrow without lying about the hierarchy:
*
*
Still the page's real heading, just smaller
*
* Sites override these; they are a floor, not a straitjacket.
* ═══════════════════════════════════════════════════════════════════════ */
body {
font-family: var(--font-body);
font-size: var(--size-0);
font-weight: 400;
line-height: var(--leading-body); /* a number, so it inherits as one; --leading is a length */
color: var(--text);
background: var(--surface);
}
/* Headings ─────────────────────────────────────────────────────────────
* Margins are top-heavy on purpose: a heading belongs to what follows it,
* so the space above is larger than the space below. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin: var(--space-l) 0 var(--space-s);
font-family: var(--font-heading);
font-weight: 700;
line-height: var(--leading); /* for each heading's own size: on the heading, never inherited */
color: var(--text-strong);
text-wrap: balance;
}
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) + * {
margin-top: 0;
}
/* A heading opening its container needs no space above it. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):first-child {
margin-top: 0;
}
/* Display headings tighten a little, more the larger they are; tune to the
* face (one with optical sizes may need none). */
h1, .h1 { font-size: var(--size-5); letter-spacing: -0.025em; }
h2, .h2 { font-size: var(--size-4); letter-spacing: -0.02em; }
h3, .h3 { font-size: var(--size-3); letter-spacing: -0.015em; }
h4, .h4 { font-size: var(--size-2); letter-spacing: -0.01em; }
h5, .h5 { font-size: var(--size-1); }
h6, .h6 {
font-size: var(--size-0);
letter-spacing: 0.04em; /* capitals */
text-transform: uppercase;
}
/* A highlighted phrase inside a heading. One mechanism, not three. */
:where(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) em {
font-style: italic;
color: var(--on-soft); /* coloured text on the page */
}
/* Text ─────────────────────────────────────────────────────────────── */
p, ul, ol, dl, blockquote, figure, table, pre {
margin: 0 0 var(--space-m);
}
/*
* Line length is a container's job, not every paragraph's — capping each
* leaves text hugging the left of any column already sized for reading.
* Use .measure (or set a width on the container) where prose needs it.
*/
.measure { max-width: var(--measure); }
.measure-tight { max-width: var(--measure-tight); }
/* Opening paragraph: larger and looser than body copy. */
.lede {
font-size: var(--size-1);
line-height: var(--leading);
color: var(--text-muted);
}
/* Small label above a heading. */
.eyebrow {
display: block;
margin-bottom: var(--space-2xs);
font-size: var(--size--1);
font-weight: 600;
line-height: var(--leading);
letter-spacing: 0.04em; /* capitals */
text-transform: uppercase;
color: var(--on-soft);
}
small, .text-small { font-size: var(--size--1); line-height: var(--leading); }
strong, b { font-weight: 600; }
a {
color: var(--link);
text-decoration-thickness: var(--border-width-s);
text-underline-offset: 0.15em;
transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }
/* The focus ring lives in "Form controls & focus" below. */
ul, ol { padding-left: var(--space-m); }
/*
* List spacing applies to PROSE lists only. Navigation, button groups and
* card grids are lists too, and flow margins on those knock flex/grid items
* out of alignment (the site header) or balloon the spacing (the footer).
*
* Presence of a class is not the test — a footer nav is a nav whether or not
* anyone put a class on it — so navigation context opts out explicitly.
*/
:where(ul, ol) > li { margin-bottom: var(--space-2xs); }
:where(ul, ol) > li:last-child { margin-bottom: 0; }
nav ul, nav ol,
header ul, header ol,
footer ul, footer ol,
menu {
margin: 0;
padding-left: 0;
list-style: none;
}
nav li, header li, footer li, menu li {
margin-bottom: 0;
}
/* A list explicitly used for layout carries no bullets, indent or margin. */
:where(ul, ol)[class] {
margin: 0;
padding-left: 0;
list-style: none;
}
:where(ul, ol)[class] > li { margin-bottom: 0; }
blockquote {
/* The quote bar is a quiet border in the group's colour: Dials' subtle
* border pattern (tokens.md, "A subtle border in a group's colour"),
* declared here rather than at :root so it follows an .is-* class on the
* quote. --line itself is a strong 3:1 line since Dials v0.2.0; 30% of
* it keeps the bar about as light as it was before (the pattern's
* example is 40%: a step darker). Decoration: no contrast promised. */
--quote-bar: color-mix(in oklab, var(--line) 30%, var(--border));
padding-left: var(--space-m);
border-left: var(--border-width-l) solid var(--quote-bar);
color: var(--text-muted);
font-style: italic;
}
hr {
height: 0;
margin: var(--space-l) 0;
border: 0;
border-top: var(--border-width-s) solid var(--border);
}
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
}
/* Media ────────────────────────────────────────────────────────────────
* Images carry NO radius and NO background plate by default.
*
* They used to. `img { border-radius: var(--radius-m); background: var(--surface-raised) }`
* was added to fix one square photo on Wellbrook, and it cost far more than it
* saved: every migration since has had to undo it, because a faithful clone of a
* customer's live site decides its own corners, and the background plate fills
* the transparent areas of every PNG and SVG — a logo on a dark footer renders
* as a solid block. Ten of the thirteen sites on this box carried an override
* for it before it was removed.
*
* A radius is a design decision belonging to the site's own stylesheet, next to
* the cards it should match. Use .is-rounded (below) or a site-layer rule; do
* not put it back here. */
img, picture, video, canvas, svg {
height: auto;
}
/* Opt in where a photo should match the radius of the cards around it. */
img.is-rounded, .is-rounded img { border-radius: var(--radius-m); }
figure { margin-inline: 0; }
figcaption {
margin-top: var(--space-2xs);
font-size: var(--size--1);
line-height: var(--leading);
color: var(--text-quiet);
}
/* Tables ───────────────────────────────────────────────────────────── */
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th, td {
padding: var(--space-2xs) var(--space-xs);
border-bottom: var(--border-width-s) solid var(--border);
vertical-align: top;
}
th {
font-weight: 600;
color: var(--text-strong);
}
tbody tr:last-child :where(th, td) { border-bottom: 0; }
/* ═══ Form controls & focus ═══ form-controls:begin ══════════════════════
* A text field's look, and every focus ring on the site, are set ONCE,
* here: by the --field-* and --focus-ring* tokens and a few base rules.
* Every text-like control on the site (contact, search, careers, booking,
* anything mediflare.js or Connect writes) inherits it, so they match by
* construction.
*
* - This section is copied VERBATIM from _template and never edited in a
* site: check-system.sh fails the site if its copy differs by a character.
* A site differs only in TOKEN VALUES, set in the site layer's own :root,
* below this section (a later :root wins over the defaults here).
* - Never restyle a control inside a component. A component rule may place
* a field (grid, margin, width) but never sets its border, radius,
* background or height -- check-system.sh fails the site if one does.
* - Fields and buttons share ONE corner, --control-radius: set it in the
* site layer's :root and both follow. Never set --field-radius
* (check-system.sh fails it), except to 0px in underline mode below;
* pill buttons mean pill fields.
* - The base rules are at zero specificity (:where), so any token change
* reaches every field and nothing here outranks a deliberate override.
* - ONE focus ring per site, on links, buttons and fields alike: an outline
* in --focus-ring at --focus-ring-w. No other rule sets a focus outline,
* colour or box-shadow (check-system.sh fails one); outline-offset may be
* adjusted where a ring would be clipped.
* - Underline-only fields: set --field-border-w: 0,
* --field-border-bottom: var(--border-width-s) solid and
* --field-radius: 0px (an underline has no corners to share; a rounded
* one curves at its ends, and buttons keep --control-radius); optionally
* --field-focus-border-bottom: var(--focus-ring-w) solid var(--focus-ring)
* so the underline thickens with the ring. No extra rules. Underline
* mode is the only time a site sets --field-radius, and check-system.sh
* then requires the 0px.
* - Colours follow the band. The colour tokens are declared on the page
* AND on every .is-light/.is-dark band and [data-dials] scope, as Dials
* declares its own: a browser on Dials' fallback (no relative colour)
* works a token out once per scope, so declared on :root alone a field
* in a dark band kept the light page's border and ring. A site that
* changes a field COLOUR sets it on the same four selectors, after this
* section (:root, [data-dials], .is-light, .is-dark { --field-...: ... }),
* or a band keeps the default. Sizes are set on :root only.
* - A panel on a ground that is not a Dials surface (a brand fill) re-sets
* the leaf colour tokens on the container, never the rules:
* .brand-panel {
* --focus-ring: var(--brand-on-solid);
* --field-border: var(--brand-on-solid);
* }
* --focus-ring must reach >= 3:1 against every ground it is drawn on.
* The guard finds this section by the begin/end markers; keep both.
* ═══════════════════════════════════════════════════════════════════════ */
:root {
--field-h: var(--target-min); /* the single-line height: exact, never below the 44px target */
--field-textarea-h: calc(var(--field-h) * 3); /* the textarea's minimum height */
--field-pad-block: var(--space-2xs); /* textarea only; a one-line field centres its text in --field-h */
--field-pad-inline: var(--space-xs);
--field-font-size: max(var(--size-0), 1rem); /* never below 16px, or iOS zooms the page on focus */
--field-leading: var(--leading); /* Dials' leading, worked out at the field's own size */
--field-weight: 400; /* one weight wherever the field sits */
--field-label-weight: 600; /* the label's weight: the site's emphasis weight */
--field-radius: var(--control-radius); /* = the .btn radius, by construction; never set it */
--field-textarea-radius: min(var(--field-radius), var(--radius-l)); /* a pill textarea is a capsule; cap it */
--field-border-w: var(--border-width-s);
/* Unset by default, so they follow --field-border-w/--field-border:
* --field-border-bottom the resting bottom edge (underline mode)
* --field-focus-border-bottom the bottom edge while focused
* --field-focus-outline the field's ring; leave it to the default */
--focus-ring-w: var(--border-width-m); /* >= --field-border-w, so the ring covers the border */
}
/* The colours, on the bands too (see above). */
:root, [data-dials], .is-light, .is-dark {
--field-bg: var(--surface-raised); /* fields sit on the raised surface, as cards do */
--field-ink: var(--text);
--field-border: var(--border-strong); /* Dials' control border: 3:1 on every surface */
--field-border-hover: var(--text-quiet);
--field-placeholder: var(--text-quiet);
--focus-ring: var(--focus); /* Dials' focus ring: >= 3:1 on every surface, light and dark */
}
/* THE focus ring: every interactive element, always. Fields refine the
* offset and radius below; nothing else sets a focus outline. */
:focus-visible {
outline: var(--focus-ring-w) solid var(--focus-ring);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
label {
display: block;
margin-bottom: var(--space-3xs);
font-size: var(--size--1);
font-weight: var(--field-label-weight);
line-height: var(--leading);
color: var(--text-strong);
}
/* THE base rule. Every text-like control: text, email, tel, search, number,
* date, url, password, select and textarea -- not checkboxes, radios,
* ranges, files or button-type inputs. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea) {
--_field-radius: var(--field-radius);
appearance: none;
box-sizing: border-box;
width: 100%;
height: var(--field-h);
min-height: var(--field-h);
padding: 0 var(--field-pad-inline);
font: inherit;
font-size: var(--field-font-size);
font-weight: var(--field-weight);
line-height: var(--field-leading);
color: var(--field-ink);
background-color: var(--field-bg);
border: var(--field-border-w) solid var(--field-border);
border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
border-radius: var(--_field-radius);
box-shadow: none;
transition: border-color var(--duration-fast) var(--ease-out);
}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):hover {
border-color: var(--field-border-hover);
}
/* One edge on focus. The offset pulls the ring in by the border's width, so
* it is drawn ON the border (covering it) rather than outside it; the border
* and shadow are held at rest so nothing draws a second edge. Specificity
* 0,1,0 and later than the global :focus-visible, so it wins over that one
* (whose offset and radius suit links, not fields). In underline mode the
* bottom edge may take --field-focus-border-bottom as well. */
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus {
border-color: var(--field-border);
border-bottom: var(--field-border-bottom, var(--field-border-w) solid var(--field-border));
box-shadow: none;
outline: none;
}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=submit],[type=button],[type=reset],[type=image],[type=hidden]), select, textarea):focus-visible {
outline: var(--field-focus-outline, var(--focus-ring-w) solid var(--focus-ring));
outline-offset: calc(var(--field-border-w) * -1);
border-bottom: var(--field-focus-border-bottom, var(--field-border-bottom, var(--field-border-w) solid var(--field-border)));
border-radius: var(--_field-radius);
}
:where(textarea) {
--_field-radius: var(--field-textarea-radius);
height: auto;
min-height: var(--field-textarea-h);
padding-block: var(--field-pad-block);
resize: vertical;
}
/* The chevron is one conic-gradient wedge in --field-ink: tokens only, no
* image, so it recolours with the palette and the scheme. (Two half-square
* linear gradients leave a seam where they meet.) */
:where(select) {
padding-inline-end: calc(var(--field-pad-inline) * 2 + var(--space-xs));
background-image: conic-gradient(from -45deg at 50% 100%, var(--field-ink) 90deg, transparent 0);
background-position: calc(100% - var(--field-pad-inline)) 50%;
background-size: calc(var(--space-3xs) * 2.5) calc(var(--space-3xs) * 1.25);
background-repeat: no-repeat;
cursor: pointer;
}
:where(select[multiple], select[size]) { height: auto; padding-block: var(--field-pad-block); padding-inline-end: var(--field-pad-inline); background-image: none; }
:where(input, textarea)::placeholder { color: var(--field-placeholder); opacity: 1; }
/* The browser's own clear (x) in a search box, redrawn as a mask so it takes
* --field-ink instead of the browser's grey. */
:where(input[type=search])::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
inline-size: 1em;
block-size: 1em;
cursor: pointer;
background-color: var(--field-ink);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-solid); }
fieldset { margin: 0 0 var(--space-m); padding: 0; border: 0; }
/* ═══ form-controls:end (Form controls & focus) ═════════════════════════ */
/*
* A bare