/* ---------------------------------------------------------------------------
a2a bank — design tokens
Generated 2026-09-18. Contrast ratios in comments are computed, not estimated.
Pick ONE direction block. A is the recommended default.
--------------------------------------------------------------------------- */
:root {
/* type ------------------------------------------------------------------ */
--font-display: Newsreader, Georgia, 'Times New Roman', serif; /* italic only */
--font-ui: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
--size-display: 38px; /* line-height 1.18, italic, ink-hi */
--size-h2: 19px; /* weight 600, ink-hi */
--size-body: 15px; /* line-height 1.6, ink */
--size-caption: 13px; /* line-height 1.55, ink-mid */
--size-eyebrow: 11px; /* mono, uppercase, letter-spacing .16em, ink-mid */
--size-data: 12.5px; /* mono, ink-hi for values */
/* space ----------------------------------------------------------------- */
--zone-edge: 3px; /* left edge on a zone band, never on a card */
--hit-min: 44px; /* minimum interactive height */
}
/* ===========================================================================
DIRECTION A — Ember & Steel (recommended)
Ember = the human side: her, alerts, DENY, faults, the current step.
Steel = the machine side: telemetry, GA products, ALLOW, the traced path.
=========================================================================== */
:root {
--ground: #120F0C; /* page */
--surface: #1D1915; /* card, zone band */
--raised: #282320; /* table head, active step */
--hairline: #352F2B; /* card border */
--rule: #4A443E; /* divider, boundary line */
--ink-hi: #F7F1E9; /* 17.0:1 headings, zone names, stat values */
--ink: #D4CCC4; /* 12.0:1 body copy */
--ink-mid: #ABA39A; /* 7.7:1 captions, eyebrows, 2nd column */
--ink-pending: #978F86; /* 6.0:1 empty / pending / not-yet-run ONLY */
--ember: #EA9B7C; /* 8.6:1 on ground */
--ember-fill: #A7491F; /* ink-hi on it: 5.2:1 */
--ember-edge: #704230;
--ember-wash: #34211A;
--steel: #76B8F0; /* 9.0:1 on ground */
--steel-fill: #0A6BA8; /* ink-hi on it: 5.1:1 */
--steel-edge: #30506C;
--steel-wash: #1A2834;
/* the customer surface — unchanged from today, own ramp, never borrows above */
--paper: #E9E2D3;
--paper-ink: #1B1811; /* 13.7:1 */
--paper-body: #4A443C; /* 7.5:1 */
--paper-meta: #6B6355; /* 4.6:1 */
--paper-ember: #A7491F; /* paper on it: 5.2:1 */
--seam: #A7491F; /* 1–2px wherever paper meets ground */
}
/* ===========================================================================
DIRECTION B — Bank paper (light; survives a projector and a PDF export)
Uncomment to use. Ink is rationed: only her phone and the ledger tier are dark.
===========================================================================
:root {
--ground: #F6F1E7;
--surface: #FCFAF6;
--raised: #E4DFD4;
--hairline: #D4CFC2;
--rule: #C3BCAE;
--ink-hi: #211C17; 15.0:1
--ink: #423C35; 9.7:1
--ink-mid: #5E574F; 6.3:1
--ink-pending: #6F685F; 4.9:1
--ember: #A24112; 5.7:1
--ember-fill: #A8471B; ground on it: 5.2:1
--ember-edge: #A8471B;
--ember-wash: #FDE1D7;
--steel: #005F9E; 6.0:1
--steel-fill: #0065A4; ground on it: 5.5:1
--steel-edge: #0065A4;
--steel-wash: #D7EBFC;
--paper: #211C17; inverted: her phone is the dark surface
--paper-ink: #F6F1E7; 15.0:1
--paper-body: #C3BCAE; 9.0:1
--seam: #A8471B;
}
=========================================================================== */
/* ===========================================================================
DIRECTION C — Depth (layer on top of A's ground/ink ramp)
A zone's tint says how exposed it is. Chroma fixed at 0.03, lightness falls
inward. Nothing INSIDE a zone is saturated — the only saturated colour on the
page sits on the boundary rules. Tints appear on the zone ground and its name,
nowhere else, or the page becomes a fruit bowl.
=========================================================================== */
:root {
--z-outside-bg: #3C2825; --z-outside-edge: #6B443E; --z-outside-name: #E2B0A7;
--z-dmz-bg: #332319; --z-dmz-edge: #5F402B; --z-dmz-name: #DDB499;
--z-app-bg: #0F251F; --z-app-edge: #1B4A3F; --z-app-name: #95CBBB;
--z-agent-bg: #082023; --z-agent-edge: #0D444A; --z-agent-name: #90C9D0;
--z-serving-bg: #081A23; --z-serving-edge: #133C4E; --z-serving-name: #96C6DD;
--z-core-bg: #0A1421; --z-core-edge: #1F344E; --z-core-name: #A4C0E4;
--allow: #7AD19A; /* 10.4:1 on ground */
--allow-fill: #00793F; /* ink-hi on it: 4.9:1 */
--deny: #F47B74; /* 7.2:1 on ground */
--deny-fill: #B02A2D; /* ink-hi on it: 5.8:1 */
}
/* On the lightest band (--z-outside-bg) the caption floor is --ink-mid, not
--ink-pending, which drops to 4.3:1 there. */
/* ---------------------------------------------------------------------------
Fonts
--------------------------------------------------------------------------- */