/* ============================================================
CANDLEFISH DESIGN SYSTEM — PATTERNS LAYER
Kit-authored. Layers semantic tokens on top of _system.css's
primitives so component templates reference intent, not pigment.
Load order (enforced by every template's ):
Templates use ONLY the semantic vars in this file. Zero `color: #...`
in any template body. _system.css holds the primitive ramps;
_patterns.css holds the meaning.
Dark mode: prefers-color-scheme: dark plus a `.dark` override class.
Both _system.css's `:root.dark` block and the explicit overrides at
the bottom of this file fire under .dark.
When the canonical design source becomes accessible (see gap-11
in docs/agent-runtime/known-drift.md), reconcile this file with
the upstream _patterns.css.
============================================================ */
:root {
/* ---------- Surface ---------- */
--surface-bg: var(--paper);
--surface-bg-soft: var(--paper-2);
--surface-bg-mute: var(--paper-3);
--surface-fg: var(--ink);
--surface-fg-soft: var(--ink-2);
--surface-fg-mute: var(--ink-soft);
--surface-fg-quiet: var(--ink-mute);
--surface-rule: var(--rule);
--surface-rule-strong: var(--rule-strong);
/* ---------- Spine (brand accent — single primary) ---------- */
--spine-50: var(--candlefish-50);
--spine-100: var(--candlefish-100);
--spine-300: var(--candlefish-300);
--spine-500: var(--candlefish-500);
--spine-700: var(--candlefish-700);
--spine-900: var(--candlefish-900);
/* ---------- Categorical (instrument hues, single value each)
Not ramped at the kit layer; M2 W6 deviation from the design brief
(which describes 9 ramps × 7 stops). Tracked as gap-11. ---------- */
--cat-perch: var(--inst-perch);
--cat-salmon: var(--inst-salmon);
--cat-pike: var(--inst-pike);
--cat-snook: var(--inst-snook);
--cat-eel: var(--inst-eel);
--cat-sturgeon: var(--inst-sturgeon);
--cat-sawfish: var(--inst-sawfish);
/* ---------- Signals ---------- */
--signal-success: var(--signal-up);
--signal-danger: var(--signal-down);
--signal-watch: var(--signal-watch);
--signal-info: var(--signal-info);
/* ---------- Emphasis (used by metric strips, lead numerals) ---------- */
--emphasis: var(--ink);
--emphasis-accent: var(--candlefish-700);
--emphasis-soft: var(--ink-2);
/* ---------- Type intent ---------- */
--type-display: var(--font-display);
--type-ui: var(--font-ui);
--type-mono: var(--font-mono);
--type-serif: var(--font-serif);
/* ---------- Type scale (semantic) ---------- */
--type-h1: var(--t-5xl);
--type-h2: var(--t-3xl);
--type-h3: var(--t-2xl);
--type-h4: var(--t-xl);
--type-body: var(--t-base);
--type-small: var(--t-sm);
--type-micro: var(--t-xs);
--type-mono-md: var(--t-mono-md);
--type-mono-sm: var(--t-mono-sm);
/* ---------- Spacing intent ---------- */
--space-tight: var(--s-2);
--space-base: var(--s-4);
--space-loose: var(--s-6);
--space-block: var(--s-8);
--space-section: var(--s-section);
/* ---------- Radii intent ---------- */
--radius-hair: var(--r-hair);
--radius-card: var(--r-card);
--radius-shelf: var(--r-shelf);
--radius-frame: var(--r-frame);
--radius-full: var(--r-full);
/* ---------- Borders (kit constraint: 0.5px minimum, 1px on retina) ---------- */
--border-hair: 0.5px solid var(--surface-rule);
--border-card: 1px solid var(--surface-rule);
--border-strong: 1px solid var(--emphasis);
/* ---------- Motion intent ---------- */
--ease-out: var(--ease-instrument);
--ease-in-out: var(--ease-glide);
--duration-fast: var(--d-1);
--duration-base: var(--d-2);
--duration-slow: var(--d-3);
/* ---------- Layout columns ---------- */
--col-text-measure: var(--col-text);
--col-narrow: var(--col-narrow);
--col-wide: var(--col-wide);
}
/* Dark-mode overrides. _system.css already swaps the primitives under
:root.dark (and .dark on body); this layer adds emphasis remapping
that's specific to the patterns layer. The two stylesheets cooperate. */
:root.dark,
.dark {
--emphasis: var(--ink);
--emphasis-accent: var(--candlefish-300);
--emphasis-soft: var(--ink-2);
}
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--emphasis: var(--ink);
--emphasis-accent: var(--candlefish-300);
--emphasis-soft: var(--ink-2);
}
}
/* ============================================================
COMPONENT-LEVEL PATTERNS
Reusable class shapes that the templates compose.
No gradients. No box-shadow. No raw hex.
============================================================ */
/* ---------- Accessibility ---------- */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ---------- Base body shape (when a template controls the page) ---------- */
.ck-page {
background: var(--surface-bg);
color: var(--surface-fg);
font-family: var(--type-ui);
font-size: var(--type-body);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
margin: 0;
padding: 0;
}
/* ---------- Frame (decks, one-pagers) ---------- */
.ck-frame {
box-sizing: border-box;
background: var(--surface-bg);
color: var(--surface-fg);
border: var(--border-card);
border-radius: var(--radius-frame);
padding: var(--space-block);
}
/* ---------- Header bar ---------- */
.ck-header {
display: flex;
align-items: baseline;
justify-content: space-between;
border-bottom: var(--border-hair);
padding-bottom: var(--space-tight);
margin-bottom: var(--space-loose);
font-family: var(--type-mono);
font-size: var(--type-mono-sm);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--surface-fg-mute);
}
/* ---------- Title shapes ---------- */
.ck-title {
font-family: var(--type-display);
font-size: var(--type-h1);
line-height: var(--leading-tight);
letter-spacing: var(--track-display);
color: var(--emphasis);
margin: 0;
}
.ck-subtitle {
font-family: var(--type-display);
font-size: var(--type-h3);
line-height: var(--leading-snug);
color: var(--surface-fg-soft);
margin: var(--space-tight) 0 0;
}
.ck-eyebrow {
font-family: var(--type-mono);
font-size: var(--type-mono-sm);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--surface-fg-quiet);
margin: 0 0 var(--space-tight);
}
/* ---------- Lede (one-paragraph framing) ---------- */
.ck-lede {
font-family: var(--type-serif);
font-style: italic;
font-size: var(--type-h4);
line-height: var(--leading-prose);
color: var(--surface-fg-soft);
margin: 0 0 var(--space-block);
max-width: var(--col-text-measure);
}
/* ---------- Body prose ---------- */
.ck-prose {
font-family: var(--type-ui);
font-size: var(--type-body);
line-height: var(--leading-prose);
color: var(--surface-fg);
max-width: var(--col-text-measure);
}
.ck-prose p {
margin: 0 0 var(--space-base);
}
/* ---------- Metric strip ---------- */
.ck-metric-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-loose);
border-top: var(--border-hair);
border-bottom: var(--border-hair);
padding: var(--space-loose) 0;
margin: var(--space-block) 0;
}
.ck-metric {
display: flex;
flex-direction: column;
gap: var(--space-tight);
}
.ck-metric-label {
font-family: var(--type-mono);
font-size: var(--type-mono-sm);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--surface-fg-quiet);
}
.ck-metric-value {
font-family: var(--type-display);
font-size: var(--type-h2);
line-height: var(--leading-tight);
color: var(--emphasis);
}
.ck-metric-unit {
font-family: var(--type-mono);
font-size: var(--type-mono-md);
color: var(--surface-fg-mute);
}
.ck-metric-delta-up {
color: var(--signal-success);
}
.ck-metric-delta-down {
color: var(--signal-danger);
}
.ck-metric-delta-watch {
color: var(--signal-watch);
}
/* ---------- Detail panel ---------- */
.ck-detail-panel {
border-left: var(--border-strong);
padding: var(--space-base) var(--space-loose);
background: var(--surface-bg-soft);
border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.ck-detail-panel-title {
font-family: var(--type-mono);
font-size: var(--type-mono-md);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--surface-fg-mute);
margin: 0 0 var(--space-tight);
}
/* ---------- Inline mock (UI screenshot or small mock embed) ---------- */
.ck-inline-mock {
border: var(--border-card);
border-radius: var(--radius-card);
padding: var(--space-base);
background: var(--surface-bg-soft);
font-family: var(--type-mono);
font-size: var(--type-mono-md);
line-height: var(--leading-snug);
overflow-x: auto;
}
/* ---------- Comparison (side-by-side) ---------- */
.ck-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-loose);
border-top: var(--border-hair);
border-bottom: var(--border-hair);
padding: var(--space-loose) 0;
}
.ck-comparison-side {
display: flex;
flex-direction: column;
gap: var(--space-tight);
}
.ck-comparison-label {
font-family: var(--type-mono);
font-size: var(--type-mono-sm);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--surface-fg-quiet);
}
/* ---------- Process flow ---------- */
.ck-process-flow {
display: flex;
flex-direction: column;
gap: var(--space-loose);
margin: var(--space-block) 0;
}
.ck-process-step {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-loose);
align-items: start;
padding-bottom: var(--space-loose);
border-bottom: var(--border-hair);
}
.ck-process-step:last-child {
border-bottom: 0;
}
.ck-process-step-marker {
font-family: var(--type-mono);
font-size: var(--type-mono-md);
letter-spacing: var(--track-mono);
color: var(--emphasis-accent);
min-width: 2ch;
text-align: right;
}
.ck-process-step-title {
font-family: var(--type-display);
font-size: var(--type-h4);
line-height: var(--leading-snug);
color: var(--emphasis);
margin: 0;
}
.ck-process-step-body {
font-family: var(--type-ui);
font-size: var(--type-small);
color: var(--surface-fg-soft);
margin: var(--space-tight) 0 0;
}
/* ---------- Charts (axes, marks, captions; not the data renderer) ---------- */
.ck-chart {
border: var(--border-hair);
border-radius: var(--radius-card);
padding: var(--space-loose);
background: var(--surface-bg);
}
.ck-chart-caption {
font-family: var(--type-mono);
font-size: var(--type-mono-sm);
letter-spacing: var(--track-mono);
color: var(--surface-fg-quiet);
margin: var(--space-tight) 0 0;
}
.ck-chart-axis {
stroke: var(--surface-rule-strong);
stroke-width: 1;
}
.ck-chart-mark-line {
stroke: var(--emphasis-accent);
stroke-width: 2;
fill: none;
}
.ck-chart-mark-bar {
fill: var(--emphasis-accent);
}
.ck-chart-mark-distribution {
fill: var(--cat-perch);
fill-opacity: 0.6;
stroke: var(--cat-perch);
stroke-width: 1;
}
/* ---------- Signature (brand block, deck closer) ---------- */
.ck-signature {
display: flex;
align-items: center;
gap: var(--space-loose);
border-top: var(--border-strong);
padding-top: var(--space-loose);
margin-top: var(--space-block);
font-family: var(--type-mono);
font-size: var(--type-mono-md);
letter-spacing: var(--track-mono);
text-transform: uppercase;
color: var(--surface-fg-soft);
}
.ck-signature-mark {
width: 24px;
height: 24px;
border: var(--border-strong);
border-radius: var(--radius-full);
background: var(--emphasis-accent);
}
/* ---------- Deck slide shapes ---------- */
.ck-deck-slide {
box-sizing: border-box;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--surface-bg);
color: var(--surface-fg);
border: var(--border-card);
border-radius: var(--radius-frame);
padding: var(--space-block);
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.ck-deck-slide-title {
font-family: var(--type-display);
font-size: var(--type-h1);
line-height: var(--leading-tight);
letter-spacing: var(--track-display);
color: var(--emphasis);
margin: 0;
}
.ck-deck-slide-eyebrow {
font-family: var(--type-mono);
font-size: var(--type-mono-md);
letter-spacing: var(--track-mono-loose);
text-transform: uppercase;
color: var(--surface-fg-quiet);
margin: 0 0 var(--space-loose);
}
.ck-deck-slide-body {
font-family: var(--type-ui);
font-size: var(--type-h4);
line-height: var(--leading-snug);
color: var(--surface-fg-soft);
margin: var(--space-base) 0;
max-width: var(--col-text-measure);
}