/* ========================================================================= MSGP Design System — CSS Variables GENERATED FROM tokens.json. Do not hand-edit; regenerate after token changes. Mirrors the DTCG semantic taxonomy shared with the upstream Figma library so variable bindings (semantic.text.primary, etc.) resolve to the same values in code. Three orthogonal axes (apply to or container): [data-brand="innovo"] Brand scope (only brand today) [data-mode="army-warp-weft"] (default) Light surface treatment [data-mode="army-sidebar-rail"] Gold-on-black signature pairing Legacy aliases retained for one release while mockups migrate: [data-mode="innovo-army-warp-weft"] → [data-mode="army-warp-weft"] [data-mode="innovo-army-sidebar-rail"] → [data-mode="army-sidebar-rail"] [data-theme="dark"] → [data-mode="army-sidebar-rail"] --color-accent-sand → --brand-accent-warm Token paths → CSS var names: primitives.army.gold.600 → --p-army-gold-600 primitives.space.4 → --p-space-4 semantic.text.primary → --text-primary semantic.background.canvas → --bg-canvas spacing.space.4 → --space-4 (alias) ========================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* ========================================================= PRIMITIVES — primitives.army.* ========================================================= */ --p-army-black-500: #3A3738; --p-army-black-600: #2A2728; --p-army-black-700: #221F20; /* CANONICAL Army Black — PMS BLACK 3 C */ --p-army-black-800: #1A1718; --p-army-black-900: #0F1010; --p-army-gold-50: #FFFBEA; /* Very pale gold-cream — softest warning / status-meta surface tier. Promoted 2026-05-14 (V2T-05 residue) from ~20 hardcoded sites across lib/mock/*.ts status-meta maps + acquisition CATEGORY_META compliance bg. */ --p-army-gold-100: #FFF6CC; /* Solid cream gold — emphasized warm-selection / brand-warm warning surface fill. Backs --surface-selected-warm + --surface-warning-gold. */ --p-army-gold-200: #FFE680; /* Saturated cream-gold — stronger warning tier. Backs --surface-warning-gold-strong (Q&A, Under Review, Pending Renewal, lockout warnings). */ --p-army-gold-500: #FFD633; --p-army-gold-600: #FFCC01; /* CANONICAL Army Gold — PMS 123 C */ --p-army-gold-700: #B89100; /* Deeper press / outline tier — for fg use cases where gold-600 lacks contrast on white (4.6:1 AA L) */ --p-army-green-700: #2F372F; /* CANONICAL Army Green — PMS 4224 C */ --p-army-tan-100: #F1E4C7; --p-army-tan-200: #E5D4A8; --p-army-parchment: #F7F5F0; /* Parchment canvas — warm cream surface tone for Innovo-Army product canvas. Restored 2026-05-07. */ --p-army-field-01: #727365; --p-army-field-02: #BFB8A6; --p-army-gray-01: #565557; --p-army-gray-02: #D5D5D7; --p-army-white: #FFFFFF; --p-army-highlight-orange: #F16521; --p-army-highlight-green: #2DAA27; --p-army-highlight-red: #CF0000; --p-army-deep-teal-700: #062E2F; /* Dark teal — partition surface for layered-architecture explainers (Saaha-side band). No existing primitive in this hue range; sits outside the canonical Army palette but is reserved for didactic / architecture-diagram contexts only (semantic.explainer.*). Never used as workspace chrome. Promoted 2026-05-12. */ --p-army-clay-500: #B85A3D; /* Warm terracotta — partition surface for layered-architecture explainers (Vendor partition). Distinct from --p-army-highlight-orange (signal-only) and --p-federal-burnt-sienna-700 (~40% darker). Reserved for explainer contexts. Promoted 2026-05-12. */ --p-army-slate-700: #3A4860; /* Cool dark slate — fills a genuinely new palette position between --p-army-black-500 (#3A3738, warm) and --p-federal-admin-navy-700 (#1F2D5C, deep blue). Backs --bc-identity in the bounded-context family. Distinct from admin-navy so the layered-model 'platform-admin' partition and the domain-model 'identity' bounded-context don't collapse to the same color when the two architecture pages appear together. Promoted 2026-05-12. */ --p-army-neutral-100: #FAFAF8; --p-army-neutral-200: #F3F2EE; --p-army-neutral-300: #E6E4DE; /* primitives.alpha.* — derived overlays */ --p-alpha-black-10: rgba(34, 31, 32, 0.10); --p-alpha-black-25: rgba(34, 31, 32, 0.25); --p-alpha-black-50: rgba(34, 31, 32, 0.50); --p-alpha-black-75: rgba(34, 31, 32, 0.75); --p-alpha-gold-10: rgba(255, 204, 1, 0.10); --p-alpha-gold-15: rgba(255, 204, 1, 0.15); /* Dark-mode mid-step — backs --surface-selected-warm on dark surfaces */ --p-alpha-gold-20: rgba(255, 204, 1, 0.20); --p-alpha-gold-30: rgba(255, 204, 1, 0.30); /* Dark-mode strong-warning tier — backs --surface-warning-gold-strong on dark surfaces */ --p-alpha-white-08: rgba(255, 255, 255, 0.08); --p-alpha-white-16: rgba(255, 255, 255, 0.16); /* primitives.federal.* — federal-domain colors (SAM, DoD, SBA set-asides) */ --p-federal-sam-blue: #1A4480; --p-federal-burnt-sienna-700: #7C2D12; --p-federal-forest-700: #15532D; --p-federal-admin-navy-700: #1F2D5C; --p-federal-admin-navy-100: #EAF0FB; --p-federal-admin-navy-200: #B8CEE0; /* Intermediate border tier between -100 and -300. Promoted 2026-05-14 (V2T-05 residue) from ~9 hardcoded sites across status-meta maps + acquisition data-category border. */ --p-federal-admin-navy-300: #7C92C8; --p-federal-of-blue-100: #E6EEF7; --p-federal-of-blue-300: #7AA4D2; --p-federal-od-green-100: #F0F4E5; --p-federal-od-green-300: #A5BD6A; --p-federal-od-green-pressed: #3D4D1D; --p-federal-co-chip-fg: #3E2F00; --p-federal-cui-marking: #5C4A0B; --p-federal-dod-confidential: #1F4068; --p-federal-dod-confidential-bg: #E6EAF2; --p-federal-dod-secret: #7A1F1F; --p-federal-dod-secret-bg: #FBE7E7; --p-federal-dod-top-secret: #3F1B5C; --p-federal-dod-top-secret-bg: #EFE6F5; --p-federal-gpcs-gray: #4B5563; --p-federal-idle-gray: #A0AEC0; --p-federal-old-glory-red: #BF0A30; /* U.S. Flag PMS 193 C — federal-flag iconography only */ --p-federal-od-green-700: #4A5D23; /* OD-green fill weight — between od-green-300 and od-green-pressed */ /* primitives.status.* — UI-semantic chip recipes (distinct from primitives.army.highlight.*) */ --p-status-success-100: #E8F3EC; --p-status-success-300: #C8E6D2; --p-status-success-500: #2F855A; /* dot weight */ --p-status-success-700: #1B5E20; /* foreground weight — mirrors --p-status-error-700 for fg/dot split parity. Promoted 2026-05-12 from hardcoded #1B5E20 on dashboard hub status-live pill. */ --p-status-warning-100: #FAEFD8; --p-status-warning-300: #F0DCA4; --p-status-warning-500: #B7791F; --p-status-warning-700: #8B5A0B; --p-status-error-100: #FBE3E3; --p-status-error-300: #F1BCBC; --p-status-error-500: #C53030; /* absorbs brick-700 #C73B2C — Δ ≈ 17 imperceptible */ --p-status-error-700: #9B2C2C; --p-status-cool-gray-100: #EDF2F7; --p-status-cool-gray-200: #E2E8F0; --p-status-cool-gray-500: #718096; --p-status-cool-gray-700: #4A5568; /* primitives.gradient.* — ceremonial only */ --p-gradient-army-signature: linear-gradient(95deg, #221F20 0%, #2A2728 55%, #B89100 88%, #FFCC01 100%); --p-gradient-army-gold: linear-gradient(95deg, #B89100 0%, #E5BE00 50%, #FFCC01 100%); /* primitives.space.* */ --p-space-0: 0px; --p-space-1: 4px; --p-space-2: 8px; --p-space-3: 12px; --p-space-4: 16px; --p-space-5: 24px; --p-space-6: 32px; --p-space-7: 48px; --p-space-8: 64px; --p-space-9: 96px; --p-space-10: 128px; /* primitives.radius.* */ --p-radius-0: 0px; --p-radius-1: 2px; --p-radius-2: 4px; --p-radius-round: 999px; /* primitives.border-width.* */ --p-border-thin: 1px; --p-border-rule: 2px; --p-border-bold: 4px; /* primitives.duration.* */ --p-duration-fast: 120ms; --p-duration-base: 180ms; --p-duration-slow: 280ms; /* primitives.easing.* */ --p-easing-standard: cubic-bezier(0.2, 0, 0, 1); --p-easing-entrance: cubic-bezier(0, 0, 0, 1); --p-easing-exit: cubic-bezier(0.4, 0, 1, 1); /* primitives.shadow.* */ --p-shadow-sm: 0 1px 2px rgba(34, 31, 32, 0.06), 0 1px 3px rgba(34, 31, 32, 0.08); --p-shadow-md: 0 4px 12px -4px rgba(34, 31, 32, 0.10), 0 2px 4px rgba(34, 31, 32, 0.06); --p-shadow-popover: 0 8px 24px -8px rgba(34, 31, 32, 0.18), 0 2px 6px 0 rgba(34, 31, 32, 0.08); --p-shadow-modal: 0 24px 60px -12px rgba(34, 31, 32, 0.30), 0 8px 20px 0 rgba(34, 31, 32, 0.12); /* primitives.type.size.* */ --p-fs-display: 96px; --p-fs-h1: 56px; --p-fs-h2: 32px; --p-fs-h3: 24px; --p-fs-h4: 20px; --p-fs-body-lg: 18px; --p-fs-body: 16px; --p-fs-body-sm: 14px; --p-fs-caption: 12px; --p-fs-eyebrow: 12px; --p-fs-mono: 13px; /* primitives.type.weight.* */ --p-fw-regular: 400; --p-fw-medium: 500; --p-fw-bold: 700; --p-fw-black: 800; /* primitives.type.line-height.* */ --p-lh-display: 0.95; --p-lh-heading: 1.0; --p-lh-dense: 1.35; --p-lh-body: 1.5; /* primitives.type.letter-spacing.* */ --p-tr-default: 0em; --p-tr-caps: 0.04em; --p-tr-eyebrow: 0.08em; /* primitives.type.family.* */ --p-ff-display: "G.I.", "Inter", "Arial", "Helvetica Neue", system-ui, sans-serif; --p-ff-body: "G.I.", "Inter", "Arial", "Helvetica Neue", system-ui, sans-serif; --p-ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; /* primitives.z-index.* */ --p-z-nav: 100; --p-z-sticky: 200; --p-z-popover: 800; --p-z-modal: 900; --p-z-toast: 1000; /* ========================================================= SEMANTIC — mode: innovo-army-warp-weft (default) Workspace data-density surfaces — light. Names match the upstream semantic taxonomy and mode names so Figma variable bindings roundtrip without renaming. ========================================================= */ /* semantic.background.* */ --bg-canvas: var(--p-army-parchment); /* Parchment cream — warm canvas tone. See semantic.background.canvas for rationale. */ --bg-surface: var(--p-army-white); --bg-surface-2: var(--p-army-neutral-100); --bg-sunken: var(--p-army-neutral-200); --bg-inverse: var(--p-army-black-700); --bg-brand: var(--p-army-black-700); --bg-accent: var(--p-army-gold-600); --bg-warm: var(--p-army-tan-100); /* semantic.text.* */ --text-primary: var(--p-army-black-700); --text-secondary: var(--p-army-gray-01); --text-muted: var(--p-army-field-01); --text-faint: var(--p-army-field-01); /* 4th tier — supplementary copy, helper text, table-cell metadata, timestamps. 4.52:1 on white — AA L. */ --text-on-gold-tint: var(--p-army-gold-700); /* Dark gold-on-cream text — foregrounds atop gold-tinted surfaces (gold-50/100, alpha-gold). Shared role for CO-chip-fg, eligibility-warning fg, wizard-radio fg on gold. Promoted from WS-D Pass 5D. */ --text-on-accent: var(--p-army-black-700); --text-on-inverse: var(--p-army-white); --text-muted-on-inverse: var(--p-army-gray-02); --text-brand: var(--p-army-gold-600); /* semantic.border.* */ --border-subtle: var(--p-army-neutral-300); --border-default: var(--p-army-gray-02); --border-strong: var(--p-army-field-01); --border-focus: var(--p-army-black-700); --border-brand: var(--p-army-black-700); /* semantic.action.* */ --action-primary: var(--p-army-gold-600); --action-primary-hover: var(--p-army-gold-500); --action-primary-text: var(--p-army-black-700); --action-primary-subtle: var(--p-alpha-gold-10); /* semantic.surface.selected — mode-aware selected/active row & nav fill */ --surface-selected: var(--p-alpha-gold-10); /* semantic.surface.selected-warm — emphasized warm selection fill (heavier sibling to --surface-selected) */ --surface-selected-warm: var(--p-army-gold-100); /* semantic.surface.warning-gold — brand-warm status surface for workflow-stage warnings (Q&A, Evaluation, Consensus, Pre-Release, Under Review). Distinct from --chip-warning-bg (system-warning sand). */ --surface-warning-gold: var(--p-army-gold-100); /* semantic.surface.warning-gold-strong — stronger-tier warning surface for in-flight workflow states (Q&A, Under Review, Pending Renewal, lockout warnings, system notices). Heavier sibling to --surface-warning-gold. */ --surface-warning-gold-strong: var(--p-army-gold-200); /* ========================================================================= RECIPE — semantic.surface.tonal (parameterized; no token) Derive a tinted surface + matching subtle border from ANY tone color (status primitive, categorical primitive, or arbitrary data color). Use for icon chips, status pills, decision indicators, focus rings, shield buttons. The matching foreground is the tone itself. background: color-mix(in oklch, 8%, transparent); border: 1px solid color-mix(in oklch, 24%, transparent); color: ; Mix base is `transparent` (alpha-only) — surface-agnostic and automatically mode-correct. Do NOT substitute `var(--bg-surface)` or `white`: that produces an opaque tint that mismatches when the chip sits on canvas / sunken / modal-scrim / dark-mode surfaces. Canonical alphas — 8% bg, 24% border — are tuned for SATURATED tones on a near-white or near-black surface (status primitives, brand categoricals). For low-saturation tones the 24% border can fall below visible; bump to 32% or substitute `var(--border-subtle)`. Why no token: the input tone set is open-ended (arbitrary data colors, not a closed enumeration), so a parameterized recipe is the right shape. JSX consumers expose this as `tonalSurface(tone)` returning `{ background, border }`. Why color-mix() not 8-digit-hex alpha: the legacy `${tone}15` template string concatenation breaks silently when `tone` is a CSS variable — `var(--p-status-success-700)15` is invalid CSS, the property drops, and the chip renders transparent. color-mix() resolves variables natively. ========================================================================= */ /* semantic.brand.* */ --brand-default: var(--p-army-black-700); --brand-hover: var(--p-army-green-700); --brand-accent-tan: var(--p-army-tan-100); --brand-accent-coral: var(--p-army-highlight-orange); /* semantic.status.* */ --status-success: var(--p-army-highlight-green); --status-warning: var(--p-army-highlight-orange); --status-danger: var(--p-army-highlight-red); --status-info: var(--p-army-black-700); --status-ai: var(--p-army-gold-600); /* semantic.state.* (acquisition workflow) */ --state-allowed: var(--p-army-highlight-green); --state-denied: var(--p-army-highlight-red); --state-pending: var(--p-army-highlight-orange); --state-review: var(--p-army-field-02); /* semantic.overlay.* */ --overlay-scrim: var(--p-alpha-black-75); --overlay-ai-tint: var(--p-alpha-gold-10); --overlay-image-darken: var(--p-alpha-black-25); /* semantic.portal.* */ --portal-fabric-admin: var(--p-army-gold-600); --portal-org-admin: var(--p-army-green-700); --portal-loom: var(--p-army-field-01); --portal-tapestry: var(--p-army-black-700); /* ========================================================= SEMANTIC — federal-domain extensions (mode-invariant) Roles, classification, CUI banner, vehicle types, density, integrations, certs. Promoted from Innovo-SBIR mockups baseline 2026-05-07. ========================================================= */ /* semantic.role.* */ --role-co-tone: var(--p-army-black-700); --role-co-accent: var(--p-army-gold-600); --role-co-chip-bg: var(--p-alpha-gold-10); --role-co-chip-fg: var(--p-federal-co-chip-fg); --role-co-chip-border: var(--p-army-gold-600); --role-ev-tone: var(--p-army-field-01); --role-ev-accent: var(--p-army-field-01); --role-ev-chip-bg: var(--p-army-neutral-200); --role-ev-chip-fg: var(--p-army-field-01); --role-ev-chip-border: var(--p-army-gray-02); --role-va-tone: var(--p-army-green-700); --role-va-accent: var(--p-army-green-700); --role-va-chip-bg: var(--p-federal-od-green-100); --role-va-chip-fg: var(--p-federal-od-green-pressed); --role-va-chip-border: var(--p-federal-od-green-300); --role-oa-tone: var(--p-federal-admin-navy-700); --role-oa-accent: var(--p-federal-admin-navy-700); --role-oa-chip-bg: var(--p-federal-admin-navy-100); --role-oa-chip-fg: var(--p-federal-admin-navy-700); --role-oa-chip-border: var(--p-federal-admin-navy-300); --role-of-tone: var(--p-federal-sam-blue); --role-of-accent: var(--p-federal-sam-blue); --role-of-chip-bg: var(--p-federal-of-blue-100); --role-of-chip-fg: var(--p-federal-sam-blue); --role-of-chip-border: var(--p-federal-of-blue-300); /* semantic.classification.* (DoDM 5200.01) */ --classification-cui-fg: var(--p-federal-cui-marking); --classification-cui-bg: var(--p-alpha-gold-10); --classification-confidential-fg: var(--p-federal-dod-confidential); --classification-confidential-bg: var(--p-federal-dod-confidential-bg); --classification-secret-fg: var(--p-federal-dod-secret); --classification-secret-bg: var(--p-federal-dod-secret-bg); --classification-top-secret-fg: var(--p-federal-dod-top-secret); --classification-top-secret-bg: var(--p-federal-dod-top-secret-bg); /* semantic.cui-banner.* (DoDI 5230.24 — yellow on black) */ --cui-banner-bg: var(--p-army-black-700); --cui-banner-fg: var(--p-army-gold-600); /* semantic.vehicle-type.* */ --vehicle-type-gwac-bg: var(--p-federal-admin-navy-100); --vehicle-type-gwac-fg: var(--p-federal-admin-navy-700); --vehicle-type-gwac-bd: var(--p-federal-admin-navy-300); --vehicle-type-idiq-bg: var(--p-army-neutral-200); --vehicle-type-idiq-fg: var(--p-army-field-01); --vehicle-type-idiq-bd: var(--p-army-gray-02); --vehicle-type-mas-bg: var(--p-federal-od-green-100); --vehicle-type-mas-fg: var(--p-army-green-700); --vehicle-type-mas-bd: var(--p-federal-od-green-300); --vehicle-type-bpa-bg: var(--p-army-tan-100); --vehicle-type-bpa-fg: var(--p-army-highlight-orange); --vehicle-type-bpa-bd: var(--p-army-tan-200); --vehicle-type-ota-bg: var(--p-army-tan-100); --vehicle-type-ota-fg: var(--p-army-field-01); --vehicle-type-ota-bd: var(--p-army-tan-200); --vehicle-type-sbir-bg: var(--p-army-black-900); --vehicle-type-sbir-fg: var(--p-army-gold-600); --vehicle-type-sbir-bd: var(--p-army-gold-600); /* semantic.density.* (60 / 48 / 40 row heights) */ --density-row-h-cozy: 60px; --density-row-h-comfortable: 48px; --density-row-h-compact: 40px; --density-row-py-cozy: 14px; --density-row-py-comfortable: 10px; --density-row-py-compact: 8px; --density-row-font-cozy: 15px; --density-row-font-comfortable: 14px; --density-row-font-compact: 13px; --density-header-py-cozy: 12px; --density-header-py-comfortable: 8px; --density-header-py-compact: 6px; /* semantic.integration.* */ --integration-sam-color: var(--p-federal-sam-blue); --integration-dsip-color: var(--p-army-green-700); --integration-sprs-color: var(--p-federal-cui-marking); --integration-wawf-color: var(--p-army-field-01); --integration-piee-color: var(--p-federal-burnt-sienna-700); --integration-gpcs-color: var(--p-federal-gpcs-gray); --integration-status-synced-dot: var(--p-army-highlight-green); --integration-status-pending-dot: var(--p-army-highlight-orange); --integration-status-error-dot: var(--p-army-highlight-red); --integration-status-idle-dot: var(--p-federal-idle-gray); /* semantic.cert.* */ --cert-sdvosb-bg: var(--p-federal-admin-navy-700); --cert-sdvosb-fg: var(--p-army-white); --cert-wosb-bg: var(--p-federal-burnt-sienna-700); --cert-wosb-fg: var(--p-army-white); --cert-8a-bg: var(--p-federal-forest-700); --cert-8a-fg: var(--p-army-white); --cert-hubzone-bg: var(--p-federal-cui-marking); --cert-hubzone-fg: var(--p-army-white); --cert-edwosb-bg: var(--p-army-black-700); --cert-edwosb-fg: var(--p-army-gold-600); --cert-vosb-bg: var(--p-army-black-700); --cert-vosb-fg: var(--p-army-gold-600); --cert-sb-bg: var(--p-army-black-700); --cert-sb-fg: var(--p-army-gold-600); --cert-fcl-bg: var(--p-federal-admin-navy-700); --cert-fcl-fg: var(--p-army-white); --cert-cmmc-l1-bg: var(--p-army-neutral-200); --cert-cmmc-l1-fg: var(--p-army-field-01); --cert-cmmc-l2-bg: var(--p-army-field-01); --cert-cmmc-l2-fg: var(--p-army-white); --cert-cmmc-l3-bg: var(--p-army-gold-600); --cert-cmmc-l3-fg: var(--p-army-black-700); --cert-fedramp-mod-bg: var(--p-federal-admin-navy-100); --cert-fedramp-mod-fg: var(--p-federal-admin-navy-700); --cert-fedramp-high-bg: var(--p-federal-admin-navy-700); --cert-fedramp-high-fg: var(--p-army-white); --cert-taa-bg: var(--p-army-green-700); --cert-taa-fg: var(--p-army-white); /* semantic.chip.* — status chip recipes */ --chip-success-bg: var(--p-status-success-100); --chip-success-fg: var(--p-status-success-700); /* Re-pointed 2026-05-12 from -500 to -700 for fg/dot split parity with warning + error recipes. */ --chip-success-dot: var(--p-status-success-500); --chip-success-border: var(--p-status-success-300); --chip-warning-bg: var(--p-status-warning-100); --chip-warning-fg: var(--p-status-warning-700); --chip-warning-dot: var(--p-status-warning-500); --chip-warning-border: var(--p-status-warning-300); --chip-error-bg: var(--p-status-error-100); --chip-error-fg: var(--p-status-error-700); --chip-error-dot: var(--p-status-error-500); --chip-error-border: var(--p-status-error-300); --chip-neutral-bg: var(--p-status-cool-gray-100); --chip-neutral-fg: var(--p-status-cool-gray-700); --chip-neutral-dot: var(--p-status-cool-gray-500); --chip-neutral-border: var(--p-status-cool-gray-200); /* semantic.explainer.* — architecture-diagram partitioning palette (layered-model + domain-model worked examples). Reserved for didactic content only — never workspace chrome. Promoted 2026-05-12. */ --explainer-saaha-band-bg: var(--p-army-deep-teal-700); --explainer-saaha-band-fg: var(--p-status-cool-gray-100); /* absorbs #E8F0F0 — Δ imperceptible at text scale */ --explainer-saaha-band-accent: var(--p-army-gold-100); /* gold accent text on dark teal */ --explainer-msgp-band-bg: var(--p-army-parchment); /* absorbs #FAF7EE — Δ negligible */ --explainer-partition-vendor: var(--p-army-clay-500); /* vendor partition top-border + icon */ --explainer-partition-admin: var(--p-federal-admin-navy-700); /* absorbs #25304A — same hue family, same admin semantic */ /* semantic.code.* — inline-snippet syntax highlighting for architecture explainers. Zero new primitives — every binding references an existing primitive. Conventional syntax-highlight semantics adapted to the brand palette (admin-navy plays the 'keyword' role instead of purple, which is prohibited). Promoted 2026-05-12. */ --code-keyword: var(--p-federal-admin-navy-700); /* `def`, `class`, object keys / identifiers */ --code-string: var(--p-federal-od-green-pressed); /* string literals — verify AA contrast at small sizes */ --code-comment: var(--p-army-field-01); /* muted comments, render italic */ --code-number: var(--p-army-highlight-orange); /* numeric literals — narrow extension of highlight-* signal scope */ --code-required: var(--p-status-error-700); /* required-marker / asterisk — deliberately distinct token from --code-number even though hex may collide today */ /* semantic.bounded-context.* — DDD partition palette for domain-model diagrams (context maps, aggregate cards, value-stream lanes). One stable hue per bounded context, used consistently across every page that visualizes the domain. Short --bc-* prefix at the CSS-var level (mirrors --bg-* shortening of semantic.background.*) for line-length in JSX inline-fill props; full path is semantic.bounded-context.* in JSON. Names notifications / governance / pricing are expected future additions — bind per future RFC on first real use, not speculatively. Promoted 2026-05-12. */ --bc-vehicle: var(--p-army-green-700); --bc-acquisition: var(--p-army-field-01); --bc-solicitation: var(--p-army-gold-600); --bc-intake: var(--p-army-highlight-orange); --bc-source: var(--p-army-black-700); --bc-audit: var(--p-federal-gpcs-gray); --bc-identity: var(--p-army-slate-700); /* Composite focus rings (≥3:1 against both surface & canvas) */ --focus-ring: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--border-focus); --focus-ring-inverse: 0 0 0 2px var(--bg-inverse), 0 0 0 4px var(--p-army-gold-600); /* ========================================================= SPACING — top-level aliases (spacing.space.* in tokens.json) ========================================================= */ --space-0: var(--p-space-0); --space-1: var(--p-space-1); --space-2: var(--p-space-2); --space-3: var(--p-space-3); --space-4: var(--p-space-4); --space-5: var(--p-space-5); --space-6: var(--p-space-6); --space-7: var(--p-space-7); --space-8: var(--p-space-8); --space-9: var(--p-space-9); --space-10: var(--p-space-10); --space-px: 1px; --space-half-1: 2px; --space-half-3: 6px; --space-half-5: 10px; --space-half-7: 14px; --space-dense-3: 3px; --space-dense-5: 5px; --space-dense-7: 7px; --space-dense-9: 9px; --space-dense-11: 11px; --space-dense-13: 13px; --gutter-desktop: 24px; --gutter-tablet: 16px; --gutter-mobile: 16px; /* ========================================================= LEGACY / INTERNAL ALIASES — match the older colors_and_type.css names used throughout existing components. Keep these as long as components reference them; new code should use the semantic names above. ========================================================= */ --army-black: var(--p-army-black-700); --army-gold: var(--p-army-gold-600); --army-white: var(--p-army-white); --army-green: var(--p-army-green-700); --field-01: var(--p-army-field-01); --field-02: var(--p-army-field-02); --tan: var(--p-army-tan-100); --gray-01: var(--p-army-gray-01); --gray-02: var(--p-army-gray-02); --highlight-orange: var(--p-army-highlight-orange); --highlight-green: var(--p-army-highlight-green); --highlight-red: var(--p-army-highlight-red); --bg-surface-alt: var(--bg-surface-2); --fg-primary: var(--text-primary); --fg-secondary: var(--text-secondary); --fg-tertiary: var(--text-muted); --fg-on-accent: var(--text-on-accent); --fg-on-inverse: var(--text-on-inverse); --fg-muted-on-inverse: var(--text-muted-on-inverse); --fg-brand: var(--text-brand); --font-display: var(--p-ff-display); --font-body: var(--p-ff-body); --font-mono: var(--p-ff-mono); --fw-regular: var(--p-fw-regular); --fw-medium: var(--p-fw-medium); --fw-bold: var(--p-fw-bold); --fw-black: var(--p-fw-black); --fs-display: var(--p-fs-display); --fs-h1: var(--p-fs-h1); --fs-h2: var(--p-fs-h2); --fs-h3: var(--p-fs-h3); --fs-h4: var(--p-fs-h4); --fs-body-lg: var(--p-fs-body-lg); --fs-body: var(--p-fs-body); --fs-body-sm: var(--p-fs-body-sm); --fs-caption: var(--p-fs-caption); --fs-eyebrow: var(--p-fs-eyebrow); --fs-mono: var(--p-fs-mono); --lh-display: var(--p-lh-display); --lh-heading: var(--p-lh-heading); --lh-dense: var(--p-lh-dense); --lh-body: var(--p-lh-body); --tr-default: var(--p-tr-default); --tr-caps: var(--p-tr-caps); --tr-eyebrow: var(--p-tr-eyebrow); --radius-0: var(--p-radius-0); --radius-1: var(--p-radius-1); --radius-2: var(--p-radius-2); --radius-round: var(--p-radius-round); --stroke-hair: var(--p-border-thin); --stroke-rule: var(--p-border-rule); --stroke-bold: var(--p-border-bold); --shadow-0: none; --shadow-sm: var(--p-shadow-sm); --shadow-md: var(--p-shadow-md); --shadow-popover: var(--p-shadow-popover); --shadow-modal: var(--p-shadow-modal); --motion-fast: var(--p-duration-fast); --motion-base: var(--p-duration-base); --motion-slow: var(--p-duration-slow); --ease-standard: var(--p-easing-standard); --ease-entrance: var(--p-easing-entrance); --ease-exit: var(--p-easing-exit); --z-nav: var(--p-z-nav); --z-sticky: var(--p-z-sticky); --z-popover: var(--p-z-popover); --z-modal: var(--p-z-modal); --z-toast: var(--p-z-toast); } /* ========================================================= BRAND SCOPE — [data-brand="innovo"] Brand-scoped semantic remaps. Today there is exactly one brand (Innovo); the selector exists so a second brand can sit alongside without restructuring. The B1 rename (--color-accent-sand → --brand-accent-warm) is expressed here; --color-accent-sand remains aliased for one release. ========================================================= */ [data-brand="innovo"] { --brand-accent-warm: var(--p-army-tan-100); /* One-release alias — remove after mockups migration completes */ --color-accent-sand: var(--brand-accent-warm); } /* Default mode marker — :root holds the warp-weft values. */ [data-mode="army-warp-weft"], [data-mode="innovo-army-warp-weft"] /* legacy alias — remove after mockups migration */ { /* No overrides needed. */ } /* ========================================================= SEMANTIC — mode: army-sidebar-rail Signature Army Gold-on-Black pairing — AAA at 10.81:1. Apply to or any container holding sidebar/rail/dark surfaces. Legacy aliases retained for one release while the mockups project migrates: [data-mode="innovo-army-sidebar-rail"] and [data-theme="dark"]. ========================================================= */ [data-mode="army-sidebar-rail"], [data-mode="innovo-army-sidebar-rail"], /* legacy alias */ [data-theme="dark"] /* legacy alias */ { --bg-canvas: var(--p-army-black-700); --bg-surface: var(--p-army-black-600); --bg-surface-2: var(--p-army-black-500); --bg-sunken: var(--p-army-black-800); --bg-inverse: var(--p-army-white); --bg-brand: var(--p-army-black-700); --bg-accent: var(--p-army-gold-600); --bg-warm: var(--p-army-green-700); --text-primary: var(--p-army-white); --text-secondary: var(--p-army-gray-02); --text-muted: var(--p-army-field-02); --text-faint: var(--p-army-gray-02); /* 4th tier on dark — light cool neutral, 11.0:1 on black AAA. */ --surface-selected: var(--p-alpha-gold-20); /* Dark-mode override — gold-bronze tint reads as selected on black */ --surface-selected-warm: var(--p-alpha-gold-15); /* Dark-mode override — emphasized warm selection */ --surface-warning-gold: var(--p-alpha-gold-20); /* Dark-mode override — brand-warm warning surface */ --surface-warning-gold-strong: var(--p-alpha-gold-30); /* Dark-mode override — stronger-tier warning surface */ --text-on-accent: var(--p-army-black-700); --text-on-inverse: var(--p-army-black-700); --text-muted-on-inverse: var(--p-army-gray-01); --border-subtle: var(--p-alpha-white-08); --border-default: var(--p-alpha-white-16); --border-strong: var(--p-army-field-01); --border-focus: var(--p-army-gold-600); --border-brand: var(--p-army-gold-600); --brand-default: var(--p-army-gold-600); --brand-hover: var(--p-army-gold-500); --focus-ring: 0 0 0 2px var(--p-army-black-700), 0 0 0 4px var(--p-army-gold-600); /* Legacy alias updates */ --bg-surface-alt: var(--bg-surface-2); --fg-primary: var(--text-primary); --fg-secondary: var(--text-secondary); --fg-tertiary: var(--text-muted); --fg-on-inverse: var(--text-on-inverse); --fg-muted-on-inverse: var(--text-muted-on-inverse); } /* ========================================================= PR-F7 LEGACY BRIDGE Pre-DTCG token names retained as aliases so existing app code (~86 unique var() references across app/, components/, lib/) keeps resolving while we sweep call sites to the canonical --p-* / --bg-* / --text-* surface in follow-up PRs. Every alias points at a canonical token; no new hex literals land here. Remove this block once all sweeps complete. ========================================================= */ :root { /* --- Legacy `--army-*` primitives → canonical `--p-army-*` --- */ --army-black: var(--p-army-black-700); --army-black-2: var(--p-army-black-600); --army-ink: var(--p-army-black-800); --army-gold: var(--p-army-gold-600); --army-gold-50: var(--p-army-gold-100); --army-gold-100: var(--p-army-gold-100); --army-gold-600: var(--p-army-gold-600); --army-gold-700: var(--p-army-gold-700); --army-od-green: var(--p-federal-od-green-700); --army-od-green-dark: var(--p-army-green-700); --army-star-red: var(--p-federal-old-glory-red); --army-gradient: var(--p-gradient-army-signature); --army-gradient-gold: var(--p-gradient-army-gold); /* --- Legacy `--saaha-*` primitives → closest canonical * matches; v1 hex values inlined for the few that don't have * an exact primitive (kept here so the sweep can finish them * piecemeal without value drift). --- */ --saaha-teal-900: var(--p-army-deep-teal-700); --saaha-teal-800: #0A5C5F; --saaha-teal-700: #0D7377; --saaha-teal-600: #1A8A8E; --saaha-teal-500: #3AA7AA; --saaha-teal-300: #9CD1D3; --saaha-teal-100: #E0F0F1; --saaha-sand-800: #7A6430; --saaha-sand-600: #A88A45; --saaha-sand-500: #C4A35A; --saaha-sand-300: #E2CE97; --saaha-sand-100: #F5EDD7; --saaha-coral-700: #B8532E; --saaha-coral-600: #D16238; --saaha-coral-500: #E8734A; --saaha-coral-300: #F4A98B; --saaha-coral-100: #FBE5D9; --saaha-navy-900: #0F1620; --saaha-navy-800: #1A2332; --saaha-navy-700: var(--p-army-slate-700); --saaha-navy-600: #3A4762; --saaha-parchment: var(--p-army-parchment); --saaha-parchment-2: #EFECE3; --saaha-ink: #2D3748; --saaha-ink-mute: #4A5568; --saaha-gray-500: var(--p-status-cool-gray-500); --saaha-gray-300: #CBD5E0; --saaha-gray-200: var(--p-status-cool-gray-200); --saaha-gray-100: var(--p-status-cool-gray-100); --saaha-gradient: linear-gradient(95deg, #1A8A8E 0%, #3AA7AA 22%, #C4A35A 60%, #E8734A 100%); --saaha-gradient-soft: linear-gradient(95deg, #0D7377 0%, #A88A45 55%, #D16238 100%); /* --- Legacy `--color-*` semantic shortcuts --- */ --color-brand: var(--p-army-black-700); --color-brand-hover: var(--p-army-black-600); --color-brand-active: var(--p-army-black-800); --color-accent: var(--p-army-gold-600); --color-accent-600: var(--p-army-gold-500); --color-accent-sand: var(--p-army-gold-600); --color-accent-coral: #E8734A; --color-success: var(--p-status-success-500); --color-warning: var(--p-status-warning-500); --color-danger: var(--p-status-error-500); --color-info: #0D7377; --color-state-allowed: var(--p-status-success-500); --color-state-denied: var(--p-status-error-500); --color-state-pending: var(--p-status-warning-500); --color-state-review: #0D7377; /* --- Legacy foreground tiers → canonical --text-* --- */ --fg-1: var(--text-primary); --fg-2: var(--text-secondary); --fg-3: var(--text-muted); --fg-4: var(--text-faint); --fg-inverse: var(--text-on-inverse); --fg-on-brand: var(--text-on-accent); /* --- Legacy borders → canonical --border-* --- */ --border-1: var(--border-subtle); --border-2: var(--border-default); --border-thin: 1px; --border-med: 1.5px; --border-thick: 2px; /* --- Legacy typography → canonical type primitives --- */ --font-sans: var(--p-ff-body); /* --font-mono already canonical */ /* Legacy type-size scale — v1 used numeric labels; canonical * exposes --p-fs-* but at slightly different ramp. Keep v1 * values here for sweep to map per-component. */ --text-display: 56px; --text-h1: 40px; --text-h2: 30px; --text-h3: 22px; --text-h4: 18px; --text-body: 15px; --text-small: 13px; --text-micro: 11px; /* Legacy font weights → canonical --p-fw-* */ --weight-regular: var(--p-fw-regular); --weight-medium: var(--p-fw-medium); --weight-semibold: 600; --weight-bold: var(--p-fw-bold); --weight-black: var(--p-fw-black); /* Legacy extended spacing — canonical --p-space-* tops out at * 128px; these in-between values preserve the v1 ramp. */ --space-12: 48px; --space-16: 64px; --space-20: 80px; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.09em; /* --- Legacy radii → canonical not 1:1; preserve v1 values for * the sweep to map case-by-case. --- */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: var(--p-radius-round); /* --- Legacy shadows — preserve v1 recipes (canonical shadows * have different ramps; sweep can re-point per surface). --- */ --shadow-xs: 0 1px 2px rgba(15, 22, 32, 0.06); --shadow-lg: 0 12px 32px rgba(15, 22, 32, 0.12), 0 4px 8px rgba(15, 22, 32, 0.06); --shadow-focus: 0 0 0 3px rgba(255, 204, 1, 0.45); /* --- Legacy motion → canonical --p-duration-* / --p-easing-* --- */ --dur-fast: var(--p-duration-fast); --dur-med: var(--p-duration-base); --dur-slow: var(--p-duration-slow); --ease-emphasized: var(--p-easing-standard); --ease-out: var(--p-easing-exit); /* --- Legacy interactive surface tokens --- */ --interactive: var(--p-army-black-700); --interactive-hover: var(--p-army-black-600); --interactive-subtle: var(--p-alpha-gold-10); --interactive-ring: rgba(255, 204, 1, 0.45); } /* ========================================================= GLOBAL ELEMENT STYLES — semantic bindings (carried over from colors_and_type.css verbatim so existing component CSS keeps working) ========================================================= */ html { font-family: var(--font-body); color: var(--fg-primary); background: var(--bg-canvas); } body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums lining-nums; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); color: var(--fg-primary); letter-spacing: var(--tr-default); font-feature-settings: "ss01","cv11"; } h1, .msgp-h1 { font-size: clamp(36px, 3.4vw, var(--fs-h1)); font-weight: var(--fw-regular); line-height: var(--lh-display); } h1.caps, .msgp-h1--caps { text-transform: uppercase; letter-spacing: var(--tr-caps); } h2, .msgp-h2 { font-size: var(--fs-h2); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tr-caps); line-height: var(--lh-heading); } h3, .msgp-h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tr-caps); line-height: 0.98; } h4, .msgp-h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--tr-caps); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 2px; } .msgp-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-secondary); } p, .msgp-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-primary); text-wrap: pretty; } .msgp-body-sm { font-size: var(--fs-body-sm); } .msgp-body-lg { font-size: var(--fs-body-lg); } strong, .msgp-emphasis { font-weight: var(--fw-bold); } small, .msgp-caption { font-size: var(--fs-caption); font-weight: var(--fw-black); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-tertiary); } code, kbd, pre, .msgp-mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; } a, .msgp-link { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; } a:hover, .msgp-link:hover { text-decoration-thickness: 2.5px; } .msgp-tabular { font-variant-numeric: tabular-nums lining-nums; } .msgp-endmark::after { content: " ★"; color: var(--fg-brand); } ::selection { background: var(--army-gold); color: var(--army-black); } p, li, dd, dt, td, th { hyphens: none; text-align: start; } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 1ms; --motion-base: 1ms; --motion-slow: 1ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } }