/* ── Coaching module tokens ─────────────────────────────────────────────────── Spec set: docs/apps/trading/coaching_module/ Decisions: docs/apps/trading/coaching_module/coaching_module_design_canvas.md Every value here derives from an existing --byt-* semantic token, so the module themes with the host in byt-dark and byt-light without a second palette to maintain. THE PALETTE IS NEUTRAL PLUS BLUE, DELIBERATELY. There is no amber, rose, violet or teal in this file and none should be added. .github/skills/content-colour-governance/SKILL.md restricts surfaces to black, white and grey, with approved blue in the body, and requires semantic status to be carried by wording, icons, structure and borders instead. Every state below is already distinguishable with colour removed entirely, so nothing is lost by complying. Severity is carried by four channels, in this order of precedence: 1. a word ("Blocking", "Critical", "Not measured") 2. a glyph (octagon, slash, filled count) 3. a texture (see the two reserved textures below) 4. border weight (2px means attention, 4px left bar means blocking) Colour is the last channel and never the only one. TWO TEXTURES ARE RESERVED AND MEAN ONE THING EACH. Do not use either decoratively anywhere in the module. diagonal hatch = blocking open slash = not measured ──────────────────────────────────────────────────────────────────────────── */ :root { /* ── Readiness bands, spec 2 §2.3 ───────────────────────────────────────── An ordinal 0 to 3 scale. The score is carried by how many of three segments are filled, plus the numeral, plus the word. Band 0 is a measured zero: three segments present and outlined, none filled. That is what separates it from "not scored", which has no segments at all. */ --byt-coaching-band-0-text: var(--byt-text); --byt-coaching-band-0-segment-border: 1.5px solid var(--byt-text-secondary); --byt-coaching-band-0-segment-fill: transparent; --byt-coaching-band-1-text: var(--byt-text-muted); --byt-coaching-band-1-segment-fill: var(--byt-text-muted); --byt-coaching-band-2-text: var(--byt-text-tag); --byt-coaching-band-2-segment-fill: var(--byt-text-tag); --byt-coaching-band-3-text: var(--byt-text); --byt-coaching-band-3-segment-fill: var(--byt-text); --byt-coaching-band-segment-empty-border: 1px solid var(--byt-border-control); --byt-coaching-band-segment-width: 11px; --byt-coaching-band-segment-height: 18px; --byt-coaching-band-segment-gap: 3px; --byt-coaching-band-segment-radius: 2px; /* ── Attention, spec 3 RESTRICTING and any state needing a second look ── Heavier border than the 1px default, plus the word. No fill tint, because a tint would need a colour the contract does not allow. */ --byt-coaching-attention-border: 2px solid var(--byt-border-hover); --byt-coaching-attention-text: var(--byt-text); /* ── Blocking, spec 3 BLOCKING ──────────────────────────────────────────── The heaviest treatment in the module: a 4px left bar, the reserved hatch, and the word. Nothing else in the module may use the hatch. */ --byt-coaching-blocking-bar: 4px solid var(--byt-text); --byt-coaching-blocking-text: var(--byt-text); --byt-coaching-blocking-border: 1px solid var(--byt-border-hover); --byt-coaching-texture-blocking: repeating-linear-gradient( 135deg, color-mix(in srgb, var(--byt-text) 7%, transparent) 0 7px, transparent 7px 14px); /* ── Not measured, spec 6 §6.5 and spec 7 §7.5 ──────────────────────────── Distinct from a measured zero and distinct from a sample below its minimum. All three must never render alike. This is the marker for data that never arrived. */ --byt-coaching-unmeasured-border: 1px dashed var(--byt-border-control); --byt-coaching-unmeasured-text: var(--byt-text-muted); --byt-coaching-unmeasured-glyph: var(--byt-text-muted); /* ── Insufficient sample, spec 6 §6.5 ───────────────────────────────────── Data arrived; there is not enough of it to speak. The tile shows the count reached and the count needed, never a value. */ --byt-coaching-insufficient-border: 1px dashed var(--byt-border-control); --byt-coaching-insufficient-text: var(--byt-text-secondary); /* ── Gate types, spec 0 glossary ────────────────────────────────────────── hard, process, learning, evidence, monitor. Categorical, not ordinal, and none is better than another. Identity is carried entirely by the glyph and the label, so one neutral chip serves all five. */ --byt-coaching-gate-chip-bg: var(--byt-surface-tag); --byt-coaching-gate-chip-border: 1px solid var(--byt-border-control); --byt-coaching-gate-chip-text: var(--byt-text-tag); /* ── Surfaces and structure ───────────────────────────────────────────── */ --byt-coaching-surface: var(--byt-surface); --byt-coaching-surface-inset: var(--byt-surface-inset); --byt-coaching-border: 1px solid var(--byt-border); --byt-coaching-radius: var(--byt-radius-card); /* ── Client screens, spec 1 and the ClientShell artboard ────────────────── A client screen takes its layout from the device. Below the shared md breakpoint (768px, docs/platform-ui/design-system-rules.md) it is the single column read one-handed; from md the chrome and footer bars run the full width with a centred reading column; from lg the client dashboard goes to two columns. Figures, counts and references are set in the mono face the artboards use for anything a person might read back or compare. */ --byt-coaching-font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --byt-coaching-client-column: 640px; --byt-coaching-client-wide: 1080px; --byt-coaching-client-gutter: 20px; /* ── Type scale, the Tokens artboard ───────────────────────────────────── Seven sizes, 44 / 26 / 21 / 18 / 15 / 13 / 11, all but one the host's own. Every client component draws from these and nothing else, so the screens read at the sizes the token sheet declares rather than at the nearest half pixel that happened to fit a frame. */ --byt-coaching-font-display: var(--byt-font-h1); --byt-coaching-font-title: var(--byt-font-card-title); --byt-coaching-font-subtitle: var(--byt-font-card-title-sm); --byt-coaching-font-body: var(--byt-font-body); --byt-coaching-font-secondary: 13px; --byt-coaching-font-label: var(--byt-font-label); /* ── Grouped list ───────────────────────────────────────────────────────── A list of rows is one surface with hairlines between the rows, never a stack of individually bordered boxes. The hairline is lighter than the list's own edge. A row that carries the reserved "not measured" frame sits outside the group so the dashed edge stays visible. */ --byt-coaching-hairline: 1px solid color-mix(in srgb, var(--byt-border) 70%, transparent); --byt-coaching-primary-height: 48px; --byt-coaching-radius-card: 12px; --byt-coaching-radius-row: 10px; --byt-coaching-radius-control: 8px; --byt-coaching-glyph-border: 1.5px solid var(--byt-text-faint); --byt-coaching-surface-footer: var(--byt-surface-footer); --byt-coaching-surface-selected: var(--byt-surface-segment-selected); --byt-coaching-border-selected: 1px solid var(--byt-border-selected); --byt-coaching-placeholder-bg: color-mix(in srgb, var(--byt-text) 12%, transparent); /* Elevation for a modal and for the slider thumb, mixed from the page ground so no literal colour enters the module. */ --byt-coaching-shadow-modal: 0 2px 6px color-mix(in srgb, var(--byt-page-bg) 50%, transparent), 0 24px 60px color-mix(in srgb, var(--byt-page-bg) 60%, transparent); --byt-coaching-shadow-thumb: 0 2px 8px color-mix(in srgb, var(--byt-page-bg) 60%, transparent); --byt-coaching-placeholder-border: 1px solid color-mix(in srgb, var(--byt-text) 34%, transparent); /* ── Touch targets ──────────────────────────────────────────────────────── docs/platform-ui/design-system-rules.md sets a 44px floor. Pre-trade capture is used one-handed in a moving market, so its primary actions sit above it. */ --byt-coaching-touch-min: 44px; --byt-coaching-touch-primary: 60px; }