/* step-tokens.css — GENERATED from step-dpc-token-manifest v0.3.0 * via build/token-plan.json (CORE-WP-266). DO NOT EDIT — regenerate with * tools/generate-step-tokens-css.mjs. Every value is annotated with its token name. * * Usage: or paste this block as the * FIRST style block of a STEP HTML artifact, then reference var(--step-...) only. * Extracting palette values from sibling artifacts is prohibited as a token source * (AGENTS.md, 2026-08-10). C-008 remains the usage-doctrine authority. */ :root { --step-color-surface-paper: #FCFBF7; /* color/surface/paper — Primary artifact background. Canonical STEP paper. */ --step-color-surface-panel: #F8F8F5; /* color/surface/panel — Panel/card background one step off paper. */ --step-color-surface-white: #FFFFFF; /* color/surface/white — Pure white. Only surface where orange.onWhite is legal. */ --step-color-surface-warm: #FFF2D6; /* color/surface/warm — Warm accent surface. */ --step-color-surface-forestSoft: #E7EFEC; /* color/surface/forestSoft — Low-contrast forest wash. */ --step-color-surface-line: #D8DDD7; /* color/surface/line — Hairline borders and dividers. */ --step-color-ink-primary: #22272F; /* color/ink/primary — Default body and data text. */ --step-color-ink-secondary: #53606C; /* color/ink/secondary — Muted metadata, captions, secondary labels. */ --step-color-ink-link: #164F72; /* color/ink/link — Hyperlink text. */ --step-color-ink-inverse: #FCFBF7; /* color/ink/inverse — Text on forest / dark surfaces. */ --step-color-ink-descriptor: #4F625D; /* color/ink/descriptor — Lockup descriptor and tertiary metadata. Recovered from dpc-horizontal-lockup.svg where it was in production but untracked. */ --step-color-brand-forest: #1F4D45; /* color/brand/forest — Core brand green. DPC mark field. STEP phase-state. Workhorse text colour. */ --step-color-brand-copper: #B06A2B; /* color/brand/copper — DPC mark signal squares. STEP phase-execute. */ --step-color-brand-controlActiveBg: #073D35; /* color/brand/controlActiveBg — Active control background. */ --step-color-brand-statusActiveBg: #073C34; /* color/brand/statusActiveBg — Active status background. */ --step-color-brand-faviconForeground: #F3F1EB; /* color/brand/faviconForeground — Favicon foreground. */ --step-color-brand-teal: #245C73; /* color/brand/teal — Internal audience mark: governance files, tools, operating surfaces. Was phase/target — the only phase colour that carried real usage, promoted rather than deleted. 21.1 from forest, so the two audiences never blur. */ --step-color-brand-forestDark: #193530; /* color/brand/forestDark — Dark surface for EXTERNAL documents. Forest lowered to L*20 at its own hue, so the family holds on dark bands. 13.18:1 with white text. */ --step-color-brand-tealDark: #1B333F; /* color/brand/tealDark — Dark surface for INTERNAL documents. Teal lowered to L*20. 13.19:1 with white text. Sits 8.2 from ink/primary — close, but a surface and an ink are never chosen for the same job. */ --step-color-orange-onWhite: #B85D00; /* color/orange/onWhite — Readable orange. LEGAL ONLY ON #FFFFFF. */ --step-color-orange-onPaper: #A65300; /* color/orange/onPaper — Readable orange for paper and warm surfaces. */ --step-color-status-positive: #2F6F5E; /* color/status/positive — Positive / on-track. */ --step-color-status-caution-fill: #9A6A24; /* color/status/caution/fill — Status: caution. Graphic fill only - fails 4.5:1 as text. */ --step-color-status-caution-text: #956623; /* color/status/caution/text — Status: caution. Text-safe derivation, >=4.5:1 on all light surfaces. */ --step-color-status-risk: #A24D48; /* color/status/risk — Risk / negative. */ --step-color-status-info: #4F6473; /* color/status/info — Informational. */ --step-color-capability-automation: #173B63; /* color/capability/automation — Capability: automation. */ --step-color-capability-automationSoft: #E7EEF7; /* color/capability/automationSoft — Automation wash. */ --step-color-capability-human: #3F0F6F; /* color/capability/human — Capability: human. */ --step-color-capability-humanSoft: #EEE7F4; /* color/capability/humanSoft — Human wash. */ --step-color-capability-organization: #1F4D45; /* color/capability/organization — Capability: organization. */ --step-color-capability-organizationSoft: #E7EFEC; /* color/capability/organizationSoft — Organization wash. */ --step-color-accent-blue: #1F63A8; /* color/accent/blue — Interface link, action and dependency. NOT ink/link — ink/link is body-copy hyperlink ink inside prose; accent/blue is interactive chrome and dependency lines in diagrams. The file held ten near-identical shades of this blue across 75 uses; this is the most-used member and the other nine collapse onto it. Text-safe on all four light surfaces; 1.55:1 on brand/forest, so never as text on the dark surface. */ --step-color-accent-red: #C23D2C; /* color/accent/red — Interface alert and blocking state. NOT status/risk — status/risk grades a STEP object (a phase, a deliverable, an assessment). accent/red is a UI alert about the interface itself. 53 uses in three shades. Text-safe on all four light surfaces; 1.81:1 on brand/forest, so never as text on the dark surface. */ --step-color-accent-purple: #6F5B9A; /* color/accent/purple — Milestone and decision-gate marker. NOT capability/human — capability/human classifies who does the work; accent/purple marks a point in time on a plan. 28 uses, predominantly as a stroke on timeline markers. Text-safe on all four light surfaces; 1.65:1 on brand/forest, so never as text on the dark surface. */ --step-color-accent-amber: #FFD56F; /* color/accent/amber — Warning fill and highlight wash. FILL ONLY on light surfaces — 1.35:1 on paper, far below the 4.5 AA floor. Use status/caution/text for warning WORDS on light surfaces. It IS the one accent that carries text on brand/forest, at 6.80:1, being a light colour on the dark surface. 35 uses, all as fills. */ --step-color-accent-orange: #FB7900; /* color/accent/orange — High-salience activity accent. GRAPHIC FILL ONLY — 2.59:1 on paper. Distinct from brand/copper and from orange/onPaper, which are brand ink; this is a bright attention colour used on charts and active markers. Fails 4.5:1 on EVERY declared surface including forest (3.55:1) — there is no legal text use of this token. */ --step-color-accent-sage: #7DB6A6; /* color/accent/sage — Muted supporting fill for secondary series and neutral chart bands. GRAPHIC FILL ONLY — 2.23:1 on paper. Lower chroma than any phase wash, which is what it is for: presence without phase meaning. Fails 4.5:1 on EVERY declared surface including forest (4.13:1) — there is no legal text use of this token. */ --step-typography-family-sans: Inter, Aptos, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, Roboto, system-ui, sans-serif; /* typography/family/sans — Inter primary, remainder is fallback cascade only. */ --step-typography-family-mono: Menlo, Consolas, Monaco, monospace; /* typography/family/mono — Code, formulas, commands, source paths, compact IDs ONLY. */ --step-typography-family-primary: Inter; /* typography/family/primary — DECLARED primary typeface. Z-Proceed item 7. */ --step-typography-scale-10: 10px; /* typography/scale/10 */ --step-typography-scale-11: 11px; /* typography/scale/11 */ --step-typography-scale-12: 12px; /* typography/scale/12 */ --step-typography-scale-14: 14px; /* typography/scale/14 */ --step-typography-scale-16: 16px; /* typography/scale/16 */ --step-typography-scale-18: 18px; /* typography/scale/18 */ --step-typography-scale-20: 20px; /* typography/scale/20 */ --step-typography-scale-24: 24px; /* typography/scale/24 */ --step-typography-scale-30: 30px; /* typography/scale/30 */ --step-typography-scale-36: 36px; /* typography/scale/36 */ --step-typography-scale-48: 48px; /* typography/scale/48 */ --step-typography-scale-60: 60px; /* typography/scale/60 */ --step-typography-scale-72: 72px; /* typography/scale/72 */ --step-typography-weight-regular: 400; /* typography/weight/regular — Body, data, metadata, lists, inactive nav. DEFAULT. */ --step-typography-weight-medium: 500; /* typography/weight/medium — Compact labels, controls, active context, restrained emphasis. */ --step-typography-weight-semibold: 600; /* typography/weight/semibold — Section/card titles, table headers, selected states, totals, short statuses. */ --step-typography-weight-bold: 700; /* typography/weight/bold — Global/view titles and critical KPIs ONLY. */ --step-typography-weight-display: 800; /* typography/weight/display — One approved brand mark or true cover/display title only. */ --step-spacing-2: 2px; /* spacing/2 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-4: 4px; /* spacing/4 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-6: 6px; /* spacing/6 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-8: 8px; /* spacing/8 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-10: 10px; /* spacing/10 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-12: 12px; /* spacing/12 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-16: 16px; /* spacing/16 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-20: 20px; /* spacing/20 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-24: 24px; /* spacing/24 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-32: 32px; /* spacing/32 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-40: 40px; /* spacing/40 — Tight inside a component, medium between related blocks, large only between genuinely separate sections. Do not space evenly. */ --step-spacing-exception-48: 48px; /* spacing/exception/48 — EXCEPTION. Requires: real section, cover, or presentation reason */ --step-spacing-exception-64: 64px; /* spacing/exception/64 — EXCEPTION. Requires: real section, cover, or presentation reason */ --step-radius-ledger: 0px; /* radius/ledger — Strict dense ledgers and rules only. */ --step-radius-control: 4px; /* radius/control — Compact inner controls. */ --step-radius-field: 4px; /* radius/field — Inset/editable fields, table cells, evidence slots. */ --step-radius-default: 8px; /* radius/default — STEP DEFAULT. Panels and cards. */ --step-radius-soft: 12px; /* radius/soft — Approved soft semantic / client-facing cards only. */ --step-radius-pill: 9999px; /* radius/pill — Badges, chips, compact controls only. */ --step-radius-tight: 2px; /* radius/tight — Chip, tag, inline marker. */ --step-radius-snug: 6px; /* radius/snug — Compact control, dense table cell. */ --step-radius-large: 16px; /* radius/large — Feature card, callout panel. */ --step-radius-xlarge: 20px; /* radius/xlarge — Page shell, cover surface, hero container. */ /* ---- document-only tokens (no Figma variable equivalent) ---- */ --step-elevation-1: 0 1px 3px rgba(31,77,69,0.05), 0 1px 2px rgba(31,77,69,0.04); /* elevation/1 — Figma variables cannot hold effects; this is an Effect Style on the Figma side. */ --step-elevation-2: 0 8px 24px rgba(31,77,69,0.09), 0 2px 6px rgba(31,77,69,0.06); /* elevation/2 — Figma variables cannot hold effects; this is an Effect Style on the Figma side. */ --step-elevation-3: 0 22px 60px rgba(31,77,69,0.11), 0 6px 16px rgba(31,77,69,0.07); /* elevation/3 — Figma variables cannot hold effects; this is an Effect Style on the Figma side. */ --step-print-type-10: 7.5pt; /* print/type/10 — Millimetres and points have no Figma equivalent. */ --step-print-type-11: 8.25pt; /* print/type/11 — Millimetres and points have no Figma equivalent. */ --step-print-type-12: 9pt; /* print/type/12 — Millimetres and points have no Figma equivalent. */ --step-print-type-14: 10.5pt; /* print/type/14 — Millimetres and points have no Figma equivalent. */ --step-print-type-16: 12pt; /* print/type/16 — Millimetres and points have no Figma equivalent. */ --step-print-type-18: 13.5pt; /* print/type/18 — Millimetres and points have no Figma equivalent. */ --step-print-type-20: 15pt; /* print/type/20 — Millimetres and points have no Figma equivalent. */ --step-print-type-24: 18pt; /* print/type/24 — Millimetres and points have no Figma equivalent. */ --step-print-type-30: 22.5pt; /* print/type/30 — Millimetres and points have no Figma equivalent. */ --step-print-type-36: 27pt; /* print/type/36 — Millimetres and points have no Figma equivalent. */ --step-print-type-48: 36pt; /* print/type/48 — Millimetres and points have no Figma equivalent. */ --step-print-type-60: 45pt; /* print/type/60 — Millimetres and points have no Figma equivalent. */ --step-print-type-72: 54pt; /* print/type/72 — Millimetres and points have no Figma equivalent. */ --step-print-space-1: 1mm; /* print/space/1 — Millimetres and points have no Figma equivalent. */ --step-print-space-2: 2mm; /* print/space/2 — Millimetres and points have no Figma equivalent. */ --step-print-space-3: 3mm; /* print/space/3 — Millimetres and points have no Figma equivalent. */ --step-print-space-4: 4mm; /* print/space/4 — Millimetres and points have no Figma equivalent. */ --step-print-space-6: 6mm; /* print/space/6 — Millimetres and points have no Figma equivalent. */ --step-print-space-8: 8mm; /* print/space/8 — Millimetres and points have no Figma equivalent. */ --step-print-space-10: 10mm; /* print/space/10 — Millimetres and points have no Figma equivalent. */ --step-print-space-12: 12mm; /* print/space/12 — Millimetres and points have no Figma equivalent. */ --step-print-space-16: 16mm; /* print/space/16 — Millimetres and points have no Figma equivalent. */ --step-print-space-0_5: 0.5mm; /* print/space/0_5 — Millimetres and points have no Figma equivalent. */ --step-print-space-1_5: 1.5mm; /* print/space/1_5 — Millimetres and points have no Figma equivalent. */ } /* textStyle coverOpener: Inter 36px / 700 */ /* textStyle workingToolGlobalTitle: Inter 24px / 700 */ /* textStyle activeViewTitle: Inter 20px / 500 */ /* textStyle sectionTitle: Inter 16px / 600 */ /* textStyle cardTitle: Inter 14px / 600 */ /* textStyle tableBody: Inter 14px / 400 */ /* textStyle metadata: Inter 12px / 400 */