/* ==== Estate DS + AlexVillarroel page layer — concatenated in PATTERN order:
tokens -> preset-sites -> components(icons,button,card,forms,badge,nav) -> page
DS files are vendored byte-identical in ./ds/ (read-only). This bundle is the
deployed artifact; edit ds/*.css never, page.css for page styling. ==== */
/* =============================================================================
ESTATE DESIGN SYSTEM — TOKEN FOUNDATION (SEED)
Phase 1, step 1 · STAGED v1.3 PROPOSAL — NOT frozen, pending design-fidelity gate.
One consumed token source. Vanilla CSS. CSP-strict. No CDN. No external font.
No build step required to consume. Generalized from Git/aurora-ds tokens +
doctrine into the estate target per CURATION_design-system-phase0_2026-08-14.
v1.2 base (GATED): STAGE_ds-seed-v1_2_2026-08-15/tokens.css.
v1.3 is the CLOSING size/scale + contrast-floor pass (see CHANGELOG-v1.3.md),
adjudicated by Constellation in REVIEW_ds-components-m3_2026-08-15.md (§2 + Qs).
It changes EXACTLY these things, nothing else moves:
1. BINDING GATE FIX — --status-success-fg (LIGHT) #0a7c56 -> #097850 so it
clears WCAG AA (>=4.5) as text on --surface-2 too (was 4.486, a 0.014 miss).
2. WIDTH / MEASURE SCALE — --size-xs..xl + --measure (one shared container/
dialog width ramp; modal's --modal-w sm/md/lg adopts --size-sm/md/lg).
3. BREAKPOINT SCALE — a DOCUMENTED convention (--bp-sm/md/lg/xl), NOT runtime
custom props (@media cannot read var()). See the breakpoint block below.
4. --elevation-hover — a register-aware hover-elevation step (substrate
default here; the presets set the per-register value).
5. --control-edge FLOOR NOTE — its true floor is 3.10:1 on --surface-2 DARK
(the table row-rule worst case), not the 3.51 on --surface. Documented so
no future edit erodes it. (Comment only — no value change.)
6. LUNA kid-floor cast — lives in preset-apps.css (a Register-B EXCEPTION,
NOT a 3rd register); overrides SIZE/DENSITY tokens only.
DECLINED (per review §2.3): a line-width / hairline scale — nobody re-themes 1px.
THREE-STATE THEME (the ai-prompt-sync triad, canonical):
1. bare :root -> the complete LIGHT palette
2. @media (prefers-color-scheme:dark):root:not([data-theme="light"]) -> DARK
3. :root[data-theme="dark"] -> explicit DARK override (toggle wins)
Every color has a definition on bare :root so nothing is dark-only.
🔴 EVERY hex + px below is a PROPOSAL. Contrast-tested for WCAG AA on both
grounds (see AA table in the build report). Values are not presented as final.
============================================================================ */
/* ---------------------------------------------------------------------------
1 · TYPOGRAPHY — self-hosted variable woff2 intent, NO CDN.
The @font-face declares the SHAPE (self-hosted, subset, swap). The binaries
are not shipped in this seed; the family tokens fall back to a system stack,
so the reference renders with zero external requests. Drop the woff2 into
/fonts/ to activate. Estate serif (Fraunces intent) is a Register-A accent.
--------------------------------------------------------------------------- */
@font-face {
font-family: "Estate Sans";
src: url("/fonts/estate-sans-var.woff2") format("woff2-variations"),
url("/fonts/estate-sans-var.woff2") format("woff2");
font-weight: 100 900;
font-stretch: 75% 125%;
font-style: normal;
font-display: swap;
/* latin subset only (basic latin + latin-1 supplement + punctuation) */
unicode-range: U+0000-00FF, U+2000-206F, U+2192, U+2212, U+2013-2014;
}
@font-face {
font-family: "Estate Serif";
src: url("/fonts/estate-serif-var.woff2") format("woff2-variations"),
url("/fonts/estate-serif-var.woff2") format("woff2");
font-weight: 300 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+2000-206F;
}
:root {
/* family tokens — self-hosted first, robust system fallback stack */
--font-sans: "Estate Sans", system-ui, -apple-system, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
--font-serif: "Estate Serif", Georgia, "Times New Roman", serif; /* [A] accent */
--font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas,
monospace;
/* one type scale (px intent shown; rem so it honors user zoom) */
--fs-2xs: 0.625rem; /* 10px — meta, counts, pills (HUD floor) */
--fs-xs: 0.6875rem; /* 11px — eyebrow, status, dense labels */
--fs-sm: 0.8125rem; /* 13px — dense body / table cells (Register B) */
--fs-base: 0.875rem; /* 14px — default body */
--fs-md: 1rem; /* 16px — comfortable body (Register A) */
--fs-lg: 1.25rem; /* 20px — subheads */
--fs-xl: 1.625rem; /* 26px — section titles */
--fs-2xl: 2.125rem; /* 34px — page / hero titles */
--lh-tight: 1.2;
--lh-base: 1.45;
--lh-loose: 1.6;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* micro-label eyebrow — the shared estate instinct (uppercase + tracked) */
--tracking-eyebrow: 0.08em;
--tracking-tight: -0.01em;
/* -------------------------------------------------------------------------
2 · SPACING — one 4px ramp (Register B is dense; A pulls padding from it)
------------------------------------------------------------------------- */
--sp-0: 0;
--sp-1: 2px;
--sp-2: 4px;
--sp-3: 8px;
--sp-4: 12px;
--sp-5: 16px;
--sp-6: 24px;
--sp-7: 32px;
--sp-8: 48px;
--sp-9: 64px;
/* -------------------------------------------------------------------------
2b · WIDTH / MEASURE SCALE (v1.3 MINT) — one shared container/dialog width
ramp so components stop each picking rem literals. Justified by 3 real
consumers (modal dialog widths, card container width, nav rail width). The
spacing ramp above sizes PADDING/GAP; this ramp sizes CONTENT-BOX WIDTH.
- The modal adopts these: .modal--sm=--size-sm, --md=--size-md, --lg=--size-lg
(generalizing its former local 24/34/48rem slots).
- --measure caps prose line-length on text-heavy cards/containers.
These are substrate-neutral (do NOT flip per theme) -> bare :root only.
------------------------------------------------------------------------- */
--size-xs: 20rem; /* 320px — narrow rail / minimal panel */
--size-sm: 24rem; /* 384px — modal sm: confirms, alerts */
--size-md: 34rem; /* 544px — modal md: default forms / content */
--size-lg: 48rem; /* 768px — modal lg: rich content, tables */
--size-xl: 64rem; /* 1024px — wide container / dashboard column */
--measure: 65ch; /* prose line-length cap (~65 characters) */
/* -------------------------------------------------------------------------
2c · BREAKPOINT SCALE (v1.3) — the canonical responsive breakpoints, as a
DOCUMENTED CONVENTION, not consumable custom properties.
🔴 @media conditions CANNOT resolve var(--*): `@media (max-width: var(--bp-md))`
does not work in ANY browser. So these are NOT CSS variables — they are a
NAMED CONVENTION that every component's @media references by the SAME rem
literal, so the whole system folds at shared widths. This block is the one
source of truth for those literals; components must not invent new ones.
--bp-sm : 40rem (640px) — table switches to own-box scroll (table.css @media 40rem)
--bp-md : 48rem (768px) — nav collapses to the toggle (nav.css @media 48rem) [canonical, N3]
--bp-lg : 64rem (1024px) — multi-column dashboard reflow
--bp-xl : 80rem (1280px) — max content column / wide grids
(Real M3 consumers today: table stacks at 40rem = --bp-sm; nav collapses at
48rem = --bp-md. New components pick the nearest name, never a fresh literal.)
------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
3 · RADIUS — one ramp. The 32px outlier is RETIRED. A register picks its
default via --r-default (squared for [A], rounded for [B]).
------------------------------------------------------------------------- */
--r-0: 0;
--r-1: 3px;
--r-2: 6px;
--r-3: 10px;
--r-4: 14px;
--r-pill: 999px;
--r-default: var(--r-2); /* substrate neutral; presets override */
/* -------------------------------------------------------------------------
4 · MOTION — OPT-IN. Durations/eases are always defined, but transition +
transform are only APPLIED inside prefers-reduced-motion:no-preference
(see the utilities block). Static is the default.
------------------------------------------------------------------------- */
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-slow: 320ms; /* ceiling for a single INTERACTION transition */
--motion-loop: 1400ms; /* v1.2: ambient/continuous LOOP (spinner, pulse,
skeleton shimmer). Distinct from the <=320ms
interaction durations — a loop is not a response. */
--ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
--press-scale: 0.97;
/* -------------------------------------------------------------------------
5 · FOCUS — one ring, rendered on every tappable via :focus-visible.
Accent-based, so it clears 3:1 against both grounds.
------------------------------------------------------------------------- */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
--focus-ring-color: var(--accent);
/* =========================================================================
6 · COLOR — LIGHT PALETTE (bare :root = the default light theme)
========================================================================= */
color-scheme: light;
/* surfaces (two-tone banding source for the flat register) */
--bg: #ffffff; /* page ground */
--surface: #f6f7f9; /* raised panel / card / alt band / readonly control */
--surface-2: #eceef2; /* deeper panel / header band / hover */
--edge: #d7dbe0; /* hairline separator (decorative — see AA notes) */
--edge-strong: #b8bec8; /* heavier divider */
/* control boundary (v1.2) — the HONEST field/control edge. Tuned to ~3.5:1
(lighter than the borrowed --ink-dim ~5.8 stopgap, with margin over the 3:1
floor). Clears 3:1 on BOTH grounds AND on the --surface readonly bg:
#7d8490 on --bg(#ffffff) = 3.77:1 · on --surface(#f6f7f9) = 3.51:1
🔴 v1.3 FLOOR NOTE: --control-edge's TRUE tightest point is on --surface-2,
NOT --surface. On --surface-2 it reads 3.24:1 LIGHT (#7d8490 on #eceef2)
and 3.10:1 DARK (#687181 on #1f2630) — the table interior row-rule case
(M3 review §2). 3.10 dark is the SINGLE tightest contrast in the whole
system (0.10 over the 3:1 floor). Do NOT lighten --control-edge or darken
--surface-2 without re-checking THIS pair. Never ship a table whose only
row separator is a sub-3:1 rule (use --control-edge, not bare --edge).
--control-edge-hover mixes toward --ink so contrast RISES on interaction;
it references two flipping tokens (--control-edge + --ink) so it self-flips
per theme without a per-scope redefinition (same idiom as --focus-ring-color). */
--control-edge: #7d8490;
--control-edge-hover: color-mix(in srgb, var(--control-edge) 65%, var(--ink));
/* ink */
--ink: #191c22; /* primary text — 17.1:1 on bg */
--ink-2: #474d59; /* secondary text — 8.5:1 on bg */
--ink-dim: #5f6672; /* muted / tertiary — 5.8:1 on bg (AA at small) */
--ink-onfill: #ffffff; /* canonical: ink on ANY solid fill (accent OR status) */
--ink-onaccent: var(--ink-onfill); /* back-compat alias — external M1 consumers */
/* brand accent (Register A may override --accent with its brand hue) */
--accent: #2557d6; /* 6.2:1 on bg; white text on it = 6.2:1 */
--accent-hover: #1e46b0;
--accent-ink: var(--ink-onfill);
/* --- SEMANTIC STATUS — one set. HUE is invariant across both themes.
Each hue carries: the raw hue (dot/border/icon/wash-fill), a low-opacity
WASH (color-mix over --bg, recomputes per theme), and a per-theme TEXT
token that is AA on that ground. success = #10b981 is CANON. --- */
--status-success: #10b981;
--status-warn: #f0b429;
--status-danger: #e5484d;
--status-info: #38bdf8;
--status-neutral: var(--ink-dim);
/* low-opacity washes — 12% hue over the current ground */
--wash-success: color-mix(in srgb, var(--status-success) 12%, var(--bg));
--wash-warn: color-mix(in srgb, var(--status-warn) 12%, var(--bg));
--wash-danger: color-mix(in srgb, var(--status-danger) 12%, var(--bg));
--wash-info: color-mix(in srgb, var(--status-info) 12%, var(--bg));
--wash-neutral: color-mix(in srgb, var(--ink-dim) 10%, var(--bg));
--wash-accent: color-mix(in srgb, var(--accent) 12%, var(--bg));
/* AA-safe TEXT tokens for LIGHT ground (raw hues fail as text on white).
These are darkened same-hue variants; all clear AA (>=4.5) on bg + surface
+ surface-2 (the raised hover/header band) + their own wash.
🔴 v1.3 BINDING FIX: --status-success-fg nudged #0a7c56 -> #097850. The old
value read 4.486 on --surface-2 (a 0.014 AA miss the M3 table exposed);
#097850 reads 4.74 on --surface-2 while still clearing bg (5.51) and
surface (5.14). All four -fg now clear 4.5 on --surface-2 (see build
report table). Belt-and-suspenders rule: status -fg text is CHIP-ONLY
over raised bands — status text lives in a chip on its own wash. */
--status-success-fg: #097850; /* 5.51 bg · 5.14 surface · 4.74 surface-2 (v1.3) */
--status-warn-fg: #8a5a00; /* 5.93 bg · 5.53 surface · 5.10 surface-2 */
--status-danger-fg: #c0303a; /* 5.64 bg · 5.26 surface · 4.85 surface-2 */
--status-info-fg: #0e6f9e; /* 5.55 bg · 5.17 surface · 4.78 surface-2 */
--status-neutral-fg: var(--ink-dim);
/* =========================================================================
7 · HONESTY GRAMMAR — certainty as SHAPE (from aurora / aurora-ds).
FACT solid · DERIVED half · ASSUMPTION hollow. A mark can NEVER render more
certain than its data: assumption carries the LEAST ink (hollow ring),
derived a hard 50/50 half, fact a full disc. Unknown fails closed to hollow.
These are substrate-wide primitives (tokens + utility classes below).
========================================================================= */
--prov-fact: var(--status-success); /* solid */
--prov-derived: var(--status-warn); /* half */
--prov-assumption: var(--ink-dim); /* hollow */
--prov-mark-size: 0.72em; /* inline dot sizes to its text */
/* =========================================================================
8 · ELEVATION — substrate raw shadows. Register presets pick --elevation:
[A] flat = none (hairline + two-tone bands do the separation)
[B] one glassy-bevel token (inset top-highlight + soft drop)
Bevel is theme-aware (defined again in each dark block).
========================================================================= */
--shadow-sm: 0 1px 2px rgba(16, 20, 30, 0.06), 0 1px 1px rgba(16, 20, 30, 0.04);
--shadow-md: 0 4px 12px rgba(16, 20, 30, 0.10), 0 2px 4px rgba(16, 20, 30, 0.06);
--shadow-pop: 0 8px 24px rgba(16, 20, 30, 0.16);
--shadow-bevel:
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 1px 2px rgba(16, 20, 30, 0.06),
0 6px 18px rgba(16, 20, 30, 0.12);
--elevation: none; /* substrate neutral; presets set the register default */
/* hover-elevation step (v1.3 ADD) — the RAISE-on-interaction elevation.
Substrate-neutral default = the resting --elevation (so a flat register
stays flat: A's hover feedback is a border-strengthen, never a shadow).
The presets set the per-register value like they set --elevation:
[A] --elevation-hover: var(--elevation) (= none, stays flat)
[B] --elevation-hover: var(--shadow-md) (a shadow step above the bevel)
The card's --card-elevation-hover slot reads this, so B-card hover is one
register-scoped SEED line, not a component fork (M3 review C3). */
--elevation-hover: var(--elevation);
/* modal backdrop (v1.2) — NON-FLIPPING. A scrim always dims toward DARK on
BOTH grounds (it is an overlay, not a palette surface), so it is defined
ONCE here and NOT redefined in the dark scopes: light and dark resolve to
the SAME dark scrim. Built from the seed's own shadow ink #10141e (the
rgba(16,20,30,...) used by every --shadow-*) at 62% alpha. */
--scrim: rgba(16, 20, 30, 0.62); /* = #10141e @ 62% (hex8 #10141e9e) */
}
/* =============================================================================
DARK PALETTE — state 2: system-dark, unless an explicit light theme is set.
============================================================================= */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--bg: #0e1117;
--surface: #161b23;
--surface-2: #1f2630;
--edge: #2b333f;
--edge-strong: #3a4453;
/* control boundary (v1.2) — dark value. Tuned to ~3.5:1 on the WORST of
{input bg, --surface}, which on dark is --surface (the lighter ground):
#687181 on --bg(#0e1117) = 3.84:1 · on --surface(#161b23) = 3.51:1
🔴 v1.3 FLOOR NOTE: on --surface-2(#1f2630) this reads 3.10:1 — the single
tightest contrast in the whole system (table row-rule). See the :root
--control-edge note; do NOT erode this pair.
--control-edge-hover self-flips (defined on :root; references --ink). */
--control-edge: #687181;
--ink: #e7eaf0; /* 15.7:1 on bg */
--ink-2: #aab2c0; /* 8.9:1 on bg */
--ink-dim: #8b93a3; /* 6.1:1 on bg */
--ink-onfill: #0e1117; /* canonical: ink on ANY solid fill */
--ink-onaccent: var(--ink-onfill); /* back-compat alias */
--accent: #5b8cf0; /* 5.8:1 on bg; dark ink on it = 5.8:1 */
--accent-hover: #7aa2f5;
--accent-ink: var(--ink-onfill);
/* status HUES stay invariant; only the AA TEXT tokens change for the dark
ground (raw hues pass as text on dark, except danger which is lifted).
All four clear 4.5 on --surface-2 dark too (success 6.01, warn 8.17,
danger 5.08, info 7.11) — unchanged in v1.3 (the binding fix was LIGHT only). */
--status-success-fg: var(--status-success); /* 7.45 bg · 6.01 surface-2 */
--status-warn-fg: var(--status-warn); /* 10.14 bg · 8.17 surface-2 */
--status-danger-fg: #f5666b; /* lifted -> 6.30 bg · 5.08 surface-2 */
--status-info-fg: var(--status-info); /* 8.82 bg · 7.11 surface-2 */
--status-neutral-fg: var(--ink-dim);
/* washes are 14% hue over the dark ground for enough presence */
--wash-success: color-mix(in srgb, var(--status-success) 14%, var(--bg));
--wash-warn: color-mix(in srgb, var(--status-warn) 14%, var(--bg));
--wash-danger: color-mix(in srgb, var(--status-danger) 14%, var(--bg));
--wash-info: color-mix(in srgb, var(--status-info) 14%, var(--bg));
--wash-neutral: color-mix(in srgb, var(--ink-dim) 12%, var(--bg));
--wash-accent: color-mix(in srgb, var(--accent) 14%, var(--bg));
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
--shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.6);
--shadow-bevel:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 2px rgba(0, 0, 0, 0.5),
0 6px 18px rgba(0, 0, 0, 0.5);
/* --elevation-hover self-resolves per register (defined on :root; presets
set it). --scrim is NON-FLIPPING — intentionally NOT redefined here. */
}
}
/* =============================================================================
DARK PALETTE — state 3: explicit [data-theme="dark"] (toggle wins both ways).
Same values as the system-dark block.
============================================================================= */
:root[data-theme="dark"] {
color-scheme: dark;
--bg: #0e1117;
--surface: #161b23;
--surface-2: #1f2630;
--edge: #2b333f;
--edge-strong: #3a4453;
/* control boundary (v1.2) — dark value (see the system-dark block for ratios
+ the v1.3 3.10-on-surface-2 floor note). */
--control-edge: #687181;
--ink: #e7eaf0;
--ink-2: #aab2c0;
--ink-dim: #8b93a3;
--ink-onfill: #0e1117; /* canonical: ink on ANY solid fill */
--ink-onaccent: var(--ink-onfill); /* back-compat alias */
--accent: #5b8cf0;
--accent-hover: #7aa2f5;
--accent-ink: var(--ink-onfill);
--status-success-fg: var(--status-success);
--status-warn-fg: var(--status-warn);
--status-danger-fg: #f5666b;
--status-info-fg: var(--status-info);
--status-neutral-fg: var(--ink-dim);
--wash-success: color-mix(in srgb, var(--status-success) 14%, var(--bg));
--wash-warn: color-mix(in srgb, var(--status-warn) 14%, var(--bg));
--wash-danger: color-mix(in srgb, var(--status-danger) 14%, var(--bg));
--wash-info: color-mix(in srgb, var(--status-info) 14%, var(--bg));
--wash-neutral: color-mix(in srgb, var(--ink-dim) 12%, var(--bg));
--wash-accent: color-mix(in srgb, var(--accent) 14%, var(--bg));
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
--shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.6);
--shadow-bevel:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 1px 2px rgba(0, 0, 0, 0.5),
0 6px 18px rgba(0, 0, 0, 0.5);
/* --elevation-hover self-resolves per register (defined on :root; presets
set it). --scrim is NON-FLIPPING — intentionally NOT redefined here. */
}
/* =============================================================================
BASE ELEMENT DEFAULTS (minimal — the substrate paints its own ground so a
consuming surface never borrows a host theme).
============================================================================= */
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* =============================================================================
SUBSTRATE UTILITY CLASSES (the reusable primitives)
============================================================================= */
/* --- numeric / data typography: tabular figures everywhere numbers align --- */
.u-tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* --- the uppercase tracked micro-label eyebrow (shared estate instinct) --- */
.u-eyebrow {
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--ink-dim);
}
/* --- visually hidden (v1.2): the standard screen-reader-only utility, hoisted
into the seed from loading's local copy so every component shares ONE
accessible-label primitive (spinner labels, "Loading…" text, dialog
descriptions, icon-only control labels). Content stays in the a11y tree
and is removed from the visual layout without display:none. --- */
.u-visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* --- focus: one ring on every tappable via :focus-visible --- */
.u-focus:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* --- status chip: wash background + AA text + hue dot; render never sets a
green it did not derive. --- */
.status-chip {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-1) var(--sp-3);
border-radius: var(--r-pill);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
line-height: 1;
}
.status-chip::before {
content: "";
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: currentColor;
flex: none;
}
.status-chip.is-success { background: var(--wash-success); color: var(--status-success-fg); }
.status-chip.is-warn { background: var(--wash-warn); color: var(--status-warn-fg); }
.status-chip.is-danger { background: var(--wash-danger); color: var(--status-danger-fg); }
.status-chip.is-info { background: var(--wash-info); color: var(--status-info-fg); }
.status-chip.is-neutral { background: var(--wash-neutral); color: var(--status-neutral-fg); }
/* --- HONESTY GRAMMAR marks: certainty as shape ---------------------------- */
/* A verbatim carry of the aurora-ds fill/border treatment, tokenized.
FACT = solid disc · DERIVED = hard 50/50 half · ASSUMPTION = hollow ring.
The shape survives grayscale and fails closed; color is secondary. */
.prov-dot {
display: inline-block;
width: var(--prov-mark-size);
height: var(--prov-mark-size);
border-radius: 50%;
vertical-align: -0.05em;
box-sizing: border-box;
}
.prov-dot.is-fact {
background: var(--prov-fact);
border: 1px solid var(--prov-fact);
}
.prov-dot.is-derived {
/* hard-edged half — never a soft/ambiguous fill */
background: linear-gradient(90deg, var(--prov-derived) 50%, transparent 50%);
border: 1px solid var(--prov-derived);
}
.prov-dot.is-assumption,
.prov-dot { /* default = hollow: unknown grades fail closed to ASSUMPTION */
background: transparent;
border: 1px solid var(--prov-assumption);
}
.prov-dot.is-fact { background: var(--prov-fact); } /* re-assert after fail-closed */
/* provenance text label — pairs the shape with an AA-safe word */
.prov-label { display: inline-flex; align-items: center; gap: var(--sp-2); }
.prov-label.is-fact { color: var(--status-success-fg); }
.prov-label.is-derived { color: var(--status-warn-fg); }
.prov-label.is-assumption { color: var(--ink-dim); }
/* =============================================================================
MOTION — authored ONLY inside no-preference. Static is the default; a
reduced-motion user gets zero transition/transform from these utilities.
============================================================================= */
@media (prefers-reduced-motion: no-preference) {
.u-transition {
transition: background-color var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-spring);
}
.u-press:active { transform: scale(var(--press-scale)); }
}
/* =============================================================================
REGISTER A — MARKETING SITES preset (preset-sites.css) · v1.3
Layers on tokens.css. Surfaces: alexvillarroel · streamline · constellationlabs
· shopmarshal. Flat/print-like, brand-committed theme acceptable, static.
Overrides ONLY the axes that legitimately differ between registers:
- ELEVATION: shadowless-flat (separation via 1px hairline + two-tone bands)
- RADIUS DEFAULT: squared (--r-1, 3px) — the "catalogue" identity
- THEME DEFAULT: a site MAY brand-commit to one theme (below), but it MUST
author on the triad's token contract so a lift stays possible.
ALL semantic tokens (status hues, ink, spacing, honesty grammar) stay
INVARIANT — they are inherited from tokens.css untouched.
v1.3: sets --elevation-hover (register-aware hover-elevation step). Register A
stays FLAT on hover — its interactive feedback is a border-strengthen, never a
shadow — so --elevation-hover equals the resting --elevation (none).
Apply at the surface root in production: .
Scoped to a class so both registers can be shown side by side in reference.
============================================================================= */
.register-sites {
/* flat elevation — no drop shadow anywhere; hairline + banding do the work */
--elevation: none;
--elevation-hover: var(--elevation); /* v1.3: A stays flat on hover (= none) */
--elevation-border: 1px solid var(--edge);
/* squared identity */
--r-default: var(--r-1);
/* Register A leans on the comfortable body size + the serif accent */
--font-size-body: var(--fs-md);
--font-display: var(--font-serif); /* [A] brand accent — headings may opt in */
/* two-tone banding source (flat separation): alternate bg / surface */
--band-a: var(--bg);
--band-b: var(--surface);
}
/* A card in Register A: hairline box, no shadow. */
.register-sites .card {
background: var(--bg);
border: var(--elevation-border);
border-radius: var(--r-default);
box-shadow: var(--elevation); /* = none */
padding: var(--sp-6);
}
/* Alternating two-tone bands are the flat register's depth substitute. */
.register-sites .band:nth-child(odd) { background: var(--band-a); }
.register-sites .band:nth-child(even) { background: var(--band-b); }
/* -----------------------------------------------------------------------------
BRAND-THEME COMMIT (optional): a marketing site may commit to a single theme
by pinning [data-theme] at its root. It still inherits the full triad token
contract, so lifting it into a theme-aware context later needs no re-author.
A site swaps its brand hue by overriding --accent only:
.register-sites { --accent: #c2410c; } (example brand override)
--------------------------------------------------------------------------- */
/* =============================================================================
ICON SYSTEM — icons.css (component milestone 1)
Consumes the gated ds-seed-v0. Adds NO new design values: sizing is `em`
(tracks text), color is `currentColor` (tracks text color), motion reads the
seed's motion tokens and is authored ONLY inside no-preference.
USAGE
Decorative (default):
Meaningful (labelled):
The sprite (sprite.svg) is pasted inline once at the top of .
============================================================================= */
.icon {
/* tracks TEXT SIZE — 1em against the current font-size */
width: 1em;
height: 1em;
/* tracks TEXT COLOR — line glyphs stroke with the inherited ink */
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
/* line-box behaviour: sit on the text baseline, never stretch a flex row */
display: inline-block;
vertical-align: -0.125em;
flex: none;
/* the stroke width is authored on the 24 grid; keep it visually constant
as the glyph scales with font-size */
vector-effect: non-scaling-stroke;
}
/* filled-glyph opt-in (if a later glyph is authored as a solid shape) */
.icon.is-filled { fill: currentColor; stroke: none; }
/* size helpers (still em-relative, so they scale with the local text) */
.icon.icon-sm { font-size: 0.875em; }
.icon.icon-lg { font-size: 1.25em; }
/* chevron rotations — one glyph, four directions */
.icon.rot-90 { transform: rotate(90deg); }
.icon.rot-180 { transform: rotate(180deg); }
.icon.rot-270 { transform: rotate(270deg); }
/* -----------------------------------------------------------------------------
SPINNER — the loading glyph. The ROTATION is motion, so it is authored ONLY
inside prefers-reduced-motion:no-preference (the seed's opt-in law). Under
reduced-motion the arc renders STATIC — still a visible "busy" mark, just not
spinning — and any aria-busy / live-region text carries the state.
--------------------------------------------------------------------------- */
.icon-spinner { /* the arc is intentionally open (3/4 circle) so rotation reads */ }
@media (prefers-reduced-motion: no-preference) {
@keyframes ds-spin { to { transform: rotate(360deg); } }
.icon-spinner { animation: ds-spin var(--motion-slow, 320ms) linear infinite; }
}
/* =============================================================================
BUTTON SYSTEM — button.css (component milestone 1)
Consumes the gated ds-seed-v0. CSS-first (no JS). Works in BOTH registers by
inheritance: radius from --r-default, density from the Register-B --pad-control-*
tokens (with a ramp fallback for Register A), color/status/focus/motion all
read seed tokens. Adds NO raw hex.
AXES
variant: .btn--solid | .btn--ghost | .btn--subtle
color: (default accent) | .btn--success | .btn--warn | .btn--danger | .btn--info | .btn--neutral
size: (default md) | .btn--sm
shape: .btn--icon (square, icon-only — REQUIRES aria-label on the button)
state: :hover :active :disabled/[aria-disabled]/.is-disabled .is-loading
🔴 Q3 RULE (binding, from REVIEW_ds-seed-v0 §3): a SOLID status button's FILL
is the darkened per-theme text token --status-*-fg, NEVER the raw hue. White on
#10b981 is ~2.5:1 (fails AA); the seed's --status-success-fg (#0a7c56 on light,
raw hue on dark) + --ink-onaccent flips per theme so the pairing clears AA on
BOTH grounds. See the color modifiers below.
============================================================================= */
.btn {
/* ---- component color slots (a color modifier sets --btn-edge; the rest derive) */
--btn-fill: var(--accent);
--btn-fill-hover: var(--accent-hover);
--btn-ink: var(--accent-ink);
--btn-edge: var(--accent);
/* faint tint for ghost/subtle grounds — derived from the color slot.
(accent has no seed wash token; deriving via color-mix follows the seed's
own wash pattern rather than hardcoding — see build report / seed gaps.) */
--btn-wash: color-mix(in srgb, var(--btn-edge) 12%, var(--bg));
--btn-wash-hover: color-mix(in srgb, var(--btn-edge) 20%, var(--bg));
/* ---- density: read Register-B control padding; fall back to the 4px ramp */
--btn-pad-y: var(--pad-control-y, var(--sp-3));
--btn-pad-x: var(--pad-control-x, var(--sp-5));
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-2);
position: relative;
font-family: inherit;
font-size: var(--font-size-body, var(--fs-base));
font-weight: var(--fw-semibold);
line-height: 1.2;
letter-spacing: var(--tracking-tight);
white-space: nowrap;
text-decoration: none; /* for */
padding: var(--btn-pad-y) var(--btn-pad-x);
border: 1px solid transparent;
border-radius: var(--r-default); /* squared in Register A, rounded in Register B */
cursor: pointer;
user-select: none;
-webkit-appearance: none;
appearance: none;
background: transparent;
color: var(--btn-edge);
}
/* ---- SIZES (both stay density-aware; md inherits register control padding) --- */
.btn--sm {
--btn-pad-y: var(--sp-2);
--btn-pad-x: var(--sp-4);
font-size: var(--fs-sm);
gap: var(--sp-1);
}
/* ---- COLOR MODIFIERS — each sets the slots; Q3 solid fill = --status-*-fg ---- */
.btn--success { --btn-edge: var(--status-success-fg); --btn-fill: var(--status-success-fg); --btn-ink: var(--ink-onaccent); --btn-fill-hover: color-mix(in srgb, var(--status-success-fg) 88%, var(--ink)); --btn-wash: var(--wash-success); }
.btn--warn { --btn-edge: var(--status-warn-fg); --btn-fill: var(--status-warn-fg); --btn-ink: var(--ink-onaccent); --btn-fill-hover: color-mix(in srgb, var(--status-warn-fg) 88%, var(--ink)); --btn-wash: var(--wash-warn); }
.btn--danger { --btn-edge: var(--status-danger-fg); --btn-fill: var(--status-danger-fg); --btn-ink: var(--ink-onaccent); --btn-fill-hover: color-mix(in srgb, var(--status-danger-fg) 88%, var(--ink)); --btn-wash: var(--wash-danger); }
.btn--info { --btn-edge: var(--status-info-fg); --btn-fill: var(--status-info-fg); --btn-ink: var(--ink-onaccent); --btn-fill-hover: color-mix(in srgb, var(--status-info-fg) 88%, var(--ink)); --btn-wash: var(--wash-info); }
.btn--neutral { --btn-edge: var(--ink-2); --btn-fill: var(--ink-2); --btn-ink: var(--bg); --btn-fill-hover: color-mix(in srgb, var(--ink-2) 88%, var(--ink)); --btn-wash: var(--wash-neutral); }
/* ---- VARIANTS ------------------------------------------------------------- */
/* SOLID — filled. accent uses --accent-ink; status uses --ink-onaccent (both flip
per theme, so the darkened -fg fill + flipped ink clears AA on both grounds). */
.btn--solid {
background: var(--btn-fill);
color: var(--btn-ink);
border-color: transparent;
}
.btn--solid:hover { background: var(--btn-fill-hover); }
/* GHOST — transparent ground, colored text, faint tinted hairline. Text color is
the -fg / accent token → AA on the page ground (verified in the seed). */
.btn--ghost {
background: transparent;
color: var(--btn-edge);
border-color: color-mix(in srgb, var(--btn-edge) 42%, transparent);
}
.btn--ghost:hover { background: var(--btn-wash); border-color: var(--btn-edge); }
/* SUBTLE — wash ground, colored text, no border. Same wash+ -fg pairing as the
seed's .status-chip / .wash-box (AA-verified). */
.btn--subtle {
background: var(--btn-wash);
color: var(--btn-edge);
border-color: transparent;
}
.btn--subtle:hover { background: var(--btn-wash-hover); }
/* ---- ICON-ONLY — square footprint. MUST carry an aria-label on the button. --- */
.btn--icon { padding: var(--btn-pad-y); aspect-ratio: 1 / 1; }
.btn--icon.btn--sm { padding: var(--sp-2); }
/* the .icon inside a button rides the button's font-size (em), so it scales with
the label and the size modifier automatically — no per-size icon rule needed. */
.btn .icon { font-size: 1.05em; }
/* =============================================================================
FOCUS — reassert the seed's one ring on the component itself (covers
and any element), using the seed focus tokens. Never remove the outline.
============================================================================= */
.btn:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* =============================================================================
DISABLED — visually dimmed + inert. (WCAG 1.4.3 exempts disabled controls from
the contrast floor, so the opacity dim is compliant.) Covers the real attribute,
the ARIA form (for /div triggers), and a utility hook.
============================================================================= */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
}
.btn:disabled,
.btn.is-disabled { pointer-events: none; }
/* aria-disabled stays focusable (announced), so neutralise the press instead */
.btn[aria-disabled="true"]:active { transform: none; }
/* =============================================================================
LOADING — spinner + aria-busy. The label is hidden (kept for width) and the
spinner overlays centered. Set aria-busy="true" and disable interaction in
markup. The spinner's ROTATION is opt-in motion (see icons.css); under
reduced-motion it renders static and aria-busy carries the state.
============================================================================= */
.btn__spinner {
display: none;
position: absolute;
inset: 0;
align-items: center;
justify-content: center;
color: inherit;
}
.btn.is-loading { cursor: progress; pointer-events: none; }
.btn.is-loading .btn__label,
.btn.is-loading .icon:not(.icon-spinner) { visibility: hidden; }
.btn.is-loading .btn__spinner { display: inline-flex; }
/* =============================================================================
MOTION — authored ONLY inside no-preference (the seed's opt-in law). Static is
the default; a reduced-motion user gets no transition and no press transform.
============================================================================= */
@media (prefers-reduced-motion: no-preference) {
.btn {
transition: background-color var(--motion-base) var(--ease-standard),
border-color var(--motion-base) var(--ease-standard),
color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-spring);
}
.btn:not(:disabled):not([aria-disabled="true"]):not(.is-loading):active {
transform: scale(var(--press-scale));
}
}
/* =============================================================================
CARD SYSTEM — card.css (component milestone 3)
Consumes the gated ds-seed (tokens v1.2 + the two register presets). Works in
BOTH registers by inheritance and adds NO raw hex/px/ms/ease:
- ELEVATION reads the register's --elevation (flat none in [A], glassy-bevel
in [B]). The card NEVER invents a shadow.
- RADIUS reads --r-default (squared [A] / rounded [B]).
- BORDER reads --elevation-border (the preset's hairline).
- DENSITY/padding mirrors the register panel padding via --pad-panel with a
4px-ramp fallback for [A].
- color / ink / focus / motion all read seed tokens.
SLOTS (BEM): .card__media · .card__header (eyebrow/title/subtitle/actions) ·
.card__body · .card__footer (lead + actions) · .card__divider.
MODIFIERS: .card--interactive (whole-card link) · .card--accent-top (accent bar).
🔴 REGISTER-SKIN OVERLAP (open question for review): the seed-v0 presets ship an
illustrative `.register-sites .card` / `.register-apps .card` stub (background +
border + radius + shadow + padding) that predates this component. Those stubs are
MORE specific (0,2,0) than `.card` (0,1,0), so in-register they supply the box
skin. Every value they set is IDENTICAL to what this file derives from the same
tokens, and --card-pad is defined to EQUAL the preset's padding in both registers
(so the bleed math below always matches). Nothing conflicts today; but two owners
of the card box is a latent hazard — recommend the stubs be retired in favor of
this component in a later seed pass. This file is authored to stand alone (it sets
the full skin itself) so it renders correctly with OR without the stub present.
============================================================================= */
.card {
/* ---- component slots -------------------------------------------------- */
/* panel padding mirrors the register: [B] --pad-panel (dense), [A] --sp-6.
This EQUALS the value the preset stub applies to the card box, so the
full-bleed negative margins below always cancel the real inset exactly. */
--card-pad: var(--pad-panel, var(--sp-6));
--card-gap: var(--sp-4);
/* resting elevation = the register's --elevation (none in [A], bevel in [B]).
Never an invented shadow — the whole point of the register split. */
--card-elevation: var(--elevation);
/* interactive hover elevation: defaults to the RESTING elevation, so a flat
register stays flat and nothing is invented. A Register-B app MAY opt into a
stronger SEED shadow token without forking the component, e.g.:
.register-apps .card--interactive { --card-elevation-hover: var(--shadow-md); } */
--card-elevation-hover: var(--card-elevation);
/* ---- box (self-sufficient; the preset stub, if present, sets the same) --- */
display: flex;
flex-direction: column;
gap: var(--card-gap);
background: var(--surface); /* raised panel ground (the preset
sets [A]=--bg / [B]=--surface;
this is the standalone fallback) */
color: var(--ink);
border: var(--elevation-border, 1px solid var(--edge));
border-radius: var(--r-default); /* squared [A], rounded [B] */
box-shadow: var(--card-elevation);
padding: var(--card-pad);
overflow: hidden; /* clip media/bands/dividers to the
radius (outline is unaffected) */
}
/* =============================================================================
MEDIA — a full-bleed image/graphic at the TOP of the card. Cancels the card
padding on the top + both sides so the media reaches the rounded corners
(clipped by the card's overflow:hidden). Authored as the FIRST child.
============================================================================= */
.card__media {
margin: calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)) 0;
}
.card__media > img,
.card__media > svg,
.card__media > picture > img {
display: block;
width: 100%;
height: auto;
}
/* if a fixed media height is set inline, cover it without distortion */
.card__media[style*="height"] > img { height: 100%; object-fit: cover; }
/* =============================================================================
HEADER — eyebrow + title + subtitle, with an optional trailing action cluster
(e.g. an icon-button menu). Uses the seed .u-eyebrow for the micro-label.
============================================================================= */
.card__header {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
}
.card__headings { flex: 1 1 auto; min-width: 0; }
.card__title {
margin: 0;
font-size: var(--fs-lg);
line-height: var(--lh-tight);
font-weight: var(--fw-semibold);
letter-spacing: var(--tracking-tight);
color: var(--ink);
}
.card__subtitle {
margin: var(--sp-1) 0 0;
font-size: var(--font-size-body, var(--fs-base));
line-height: var(--lh-base);
color: var(--ink-2);
}
/* trailing header actions (icon-buttons) sit above the stretched link (see the
interactive z-index rule) so they stay independently clickable */
.card__header-actions {
flex: none;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0; /* optical nudge into pad */
}
/* =============================================================================
BODY — the content region. Secondary ink so the title stays the loudest mark.
============================================================================= */
.card__body {
color: var(--ink-2);
font-size: var(--font-size-body, var(--fs-base));
line-height: var(--lh-base);
}
.card__body > :first-child { margin-top: 0; }
.card__body > :last-child { margin-bottom: 0; }
/* =============================================================================
FOOTER — trailing actions, optionally with a leading meta slot pushed left.
============================================================================= */
.card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sp-3);
}
.card__footer-lead {
margin-right: auto; /* pushes actions to the right */
color: var(--ink-dim);
font-size: var(--fs-xs);
}
/* =============================================================================
DIVIDER — an OPTIONAL full-bleed hairline between sections. Cancels the side
padding so the rule spans edge-to-edge (decorative separator; the seed marks
--edge decorative). Use as
.
============================================================================= */
.card__divider {
height: 0;
border: 0;
border-top: 1px solid var(--edge);
margin: 0 calc(-1 * var(--card-pad));
}
/* =============================================================================
ACCENT-TOP — an OPTIONAL brand/accent bar across the card cap. Decorative
(non-text, AA floor N/A); reads --accent so a Register-A brand override or a
[data-room] cast recolors it for free. Clipped to the radius.
============================================================================= */
.card--accent-top { border-top: 3px solid var(--accent); }
/* =============================================================================
INTERACTIVE CARD — the WHOLE card is one link, but the tab stop + accessible
name live on a REAL (never a tabindex div). The link's
::after stretches over the card to make the entire surface the hit target.
============================================================================= */
.card--interactive { position: relative; }
.card__link { color: inherit; text-decoration: none; }
.card__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit; /* hit area follows the card corners */
}
/* Any OTHER real interactive target inside the card (a secondary link, a footer
button, a header icon-button) must ride ABOVE the stretched ::after so it stays
independently clickable/focusable. */
.card--interactive :is(a, button, input, select, textarea, .btn, [tabindex]):not(.card__link) {
position: relative;
z-index: 1;
}
/* hover/active feedback — register-safe: strengthen the hairline + apply the
hover-elevation slot (which defaults to the resting elevation, so flat [A]
stays flat and nothing is invented). */
.card--interactive { cursor: pointer; }
.card--interactive:hover {
border-color: var(--edge-strong);
box-shadow: var(--card-elevation-hover);
}
/* keyboard focus: the ring belongs on the WHOLE card, not just the inline title
text — map the inner link's :focus-visible onto the card box via :has()
(evergreen; same feature era the M2 modal already relies on). Never removed. */
.card--interactive:has(.card__link:focus-visible) {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
/* Fallback for any engine without :has — at minimum ring the link's own box so a
keyboard user is never left without a visible focus indicator. */
@supports not selector(:has(*)) {
.card__link:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
}
/* =============================================================================
MOTION — authored ONLY inside prefers-reduced-motion:no-preference (the seed's
opt-in law). Static is the default: a reduced-motion user still gets the
border/elevation hover feedback (a color/shadow change, not motion), just no
lift animation.
============================================================================= */
@media (prefers-reduced-motion: no-preference) {
.card {
transition:
border-color var(--motion-base) var(--ease-standard),
box-shadow var(--motion-base) var(--ease-standard),
transform var(--motion-fast) var(--ease-spring);
}
.card--interactive:hover { transform: translateY(-2px); }
.card--interactive:active { transform: translateY(0); }
}
/* =============================================================================
FORM CONTROL SET — forms.css (component milestone 2)
Consumes the gated ds-seed-v1.1. CSS-first; the ONLY JS the estate law allows
here (none required) is omitted — every control is a native element, so state,
keyboard, and focus come from the platform. Works in BOTH registers by
inheritance: radius from --r-default, density from --pad-control-* (with a 4px
ramp fallback for Register A), color/status/focus/motion all read seed tokens.
Adds NO raw hex, px, ms, or ease.
BLOCKS
.field the wrapper: label + control + help + error, one column
.input text input (type=text/email/number/… ) + .textarea
.select native