/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --primitive-color-green-50: #ecfdf5; /** Lightest green tint. DE light-mode only — chip/tag fills and callout panels with green emphasis. Not referenced in the base dark theme. */
  --primitive-color-green-100: #dcfce7; /** Very light green tint. DE light-mode only — success alert/banner backgrounds and subtle success surfaces. Not referenced in the base dark theme. */
  --primitive-color-green-200: #c8cfc4; /** Light sage-white. The brightest text tone in the dark-theme palette — high contrast without the harshness of pure white. Contrast vs green.950: 12.26:1 (AAA). Referenced by: color.foreground.default. */
  --primitive-color-green-400: #a0a89a; /** Soft desaturated green. Readable and unobtrusive secondary text. Contrast vs green.950: 7.97:1 (AA). Referenced by: color.foreground.alt, color.border.active. */
  --primitive-color-green-600: #8b9683; /** Muted sage. The lowest-contrast text color in the system that still meets WCAG AA — used for placeholders, captions, and subtle borders. Contrast vs green.950: 6.32:1 (AA). Referenced by: color.foreground.muted, color.border.hover. */
  --primitive-color-green-700: #5c685a; /** Legible passive edge. Desaturated green-gray sitting between green.600 (6.32:1) and green.800 (1.64:1) — the lightest step that clears the SC 1.4.11 non-text floor on the canvas (3.33:1 vs green.950). Reads as neutral chrome, not accent. Referenced by: color.border.default. */
  --primitive-color-green-800: #2e3a2e; /** Elevated green surface. One step above border-alt — used for structural chrome borders, card frames, and prominent dividers. Referenced by: color.border.elevated. */
  --primitive-color-green-900: #1e241e; /** Deep forest green. Elevated surface and default border — creates subtle depth above the canvas without breaking the dark aesthetic. Referenced by: color.background.alt, color.background.disabled, color.border.default. */
  --primitive-color-green-950: #0a0d0a; /** Near-black with a warm green undertone. The canvas — every page background and full-bleed section. Warmer than pure black, which reads as sterile. Referenced by: color.background.default, color.foreground.on-action, color.foreground.on-accent. */
  --primitive-color-green-accent: #4ade6e; /** Terminal phosphor green. The only high-chroma value in the system — vivid and saturated against the muted ramp. High visual weight; always use through semantic tokens. Contrast vs green.950: 11.13:1 (AAA). Referenced by: color.background.action, color.background.accent, color.foreground.action, color.foreground.accent-green, color.foreground.success. */
  --primitive-color-green-accent-hover: #3eba5c; /** Hover state of the phosphor accent. 16% black mixed into green.accent. Referenced by: color.background.action-hover. */
  --primitive-color-green-accent-active: #349b4d; /** Active/pressed state of the phosphor accent. 30% black mixed into green.accent. Referenced by: color.background.action-active. */
  --primitive-color-green-chip: #0f2016; /** Dark green chip fill. Named slot — sits between green.900 and green.950 in luminance but cannot be numbered without creating a non-standard step. Used for subtle dark-theme chip/tag fills, callout panel backgrounds, and hairline borders. Referenced by: color.background.accent-green, color.background.success-alt, color.border.muted. */
  --primitive-color-green-positive: #15803d; /** DE light-mode success green. Passes AA on white as text (5.0:1) and supports white text as fill (5.0:1). DE only — not used in the base dark theme. Referenced by: color.background.success, color.foreground.success (DE overrides). */
  --primitive-color-green-approve: #00875a; /** DE Approve outcome green. Teal-shifted green used for Approve badges, income indicators, and boolean type chips in the decision-engine. Distinct from green.positive by its cooler blue-shifted tone. Contrast vs white: 4.55:1 (WCAG AA). DE only — not used in the base dark theme. Referenced by: color.feedback.success (DE override). Renamed from green.teal 2026-04-28. */
  --primitive-color-neutral-white: #ffffff; /** Pure white. Reserved for maximum-contrast situations such as text overlaid on photography or outside-system contexts. Avoid in standard UI — it reads as outside the palette and breaks tonal cohesion. */
  --primitive-color-neutral-black: #000000; /** Pure black. Used as the background.default override for the .art site (photo-optimized, no green undertone needed). Not the default canvas for other properties — that is green.950. */
  --primitive-color-blue-100: #e5ebfc; /** Very light blue tint. Info alert backgrounds in DE. The lightest entry in the light-mode blue ramp. */
  --primitive-color-blue-150: #e0e7fb; /** Slightly more saturated blue tint than blue.100. DE accent.subtle fill — inline highlights, active chip fills, tag backgrounds. Computed from white 86% + blue.700 14%. */
  --primitive-color-blue-200: #9cb3f3; /** Medium-light blue tint. DE background.accent-hover — hover fill for accent-tinted interactive surfaces. Computed from white 55% + blue.700 45%. */
  --primitive-color-blue-250: #92aaf2; /** Medium blue for borders on accent-subtle surfaces. DE accent.subtle-border — chip outlines, tag borders, badge strokes. Computed from white 50% + blue.700 50%. */
  --primitive-color-blue-700: #2456e4; /** Decision-engine primary action blue. CTA backgrounds, interactive text, accent fills. Contrast vs white: 5.95:1 (WCAG AA). */
  --primitive-color-blue-800: #1e48d0; /** Blue hover state. Applied on interactive elements using blue.700 when hovered. */
  --primitive-color-blue-900: #183dae; /** Blue active/pressed state. Applied on interactive elements using blue.700 when actively pressed. */
  --primitive-color-blue-950: #0d1830; /** Dark blue chip fill. Dark-theme background accent — subtle chip/tag fills, callout panels with blue emphasis. Referenced by: color.background.accent-blue, color.background.info-alt. */
  --primitive-color-blue-sky: #93c5fd; /** Light blue for dark-theme accent text and icon accents. High contrast on dark canvases. Named slot rather than a numeric step — this sky blue is perceptually lighter than blue.250 and does not belong in the numeric light-mode tint ramp (100→250). Referenced by: color.foreground.accent-blue, color.foreground.info. */
  --primitive-color-red-50: #fef2f2; /** Lightest red — subtle danger surface. Used as background-subtle for danger/error states in light-mode themes. Red.600 text on this background: 4.64:1 (WCAG AA). Not used in the base dark theme. */
  --primitive-color-red-100: #fbebee; /** Very light red tint — danger hover surfaces, error row highlights. DE background.danger-subtle. Computed from white 92% + red.600 8% (the deeper crimson). Slightly more saturated than red.50 (#FEF2F2); use for interactive hover signals, red.50 for static alert fills. */
  --primitive-color-red-400: #f87171; /** Light red — danger text/icons on the dark theme. Reads on the near-black canvas (7.06:1 AAA) and on the dark danger tint red.950 (6.62:1 AA). Referenced by foreground.danger (base dark). */
  --primitive-color-red-500: #e73027; /** Destructive action / Deny outcome. Used for delete controls, error states, and Deny rule outcomes in decisioning tables. Contrast vs background.default (#0A0D0A): 4.51:1 (WCAG AA). Numbers swapped 2026-04-28 — was formerly red.600; red.500 is now the lighter of the two action reds. Brightened 2026-05-22 from #D03027 to reach WCAG AA on the dark canvas. */
  --primitive-color-red-600: #c8002e; /** Vivid danger/error red. Used for feedback.error and foreground.danger in decision-engine — a deeper, more saturated crimson than red.500. Contrast vs white: 6.01:1 (WCAG AA). Numbers swapped 2026-04-28 — was formerly red.500. */
  --primitive-color-red-700: #cc2720; /** Red hover state. Applied on elements using red.500 when hovered. */
  --primitive-color-red-800: #b11f1b; /** Red active/pressed state. Applied on elements using red.500 when actively pressed. */
  --primitive-color-red-950: #2a0a0a; /** Darkest red tint — subtle danger surface for the dark theme (error alert/badge backgrounds). Dark-theme counterpart to red.50; matches the other feedback -alt tints (green.chip, blue.950, amber.950). Referenced by background.danger-alt (base dark). */
  --primitive-color-purple-600: #7c3aed; /** Purple accent — reserved for pending/review outcome states in decisioning tables. Contrast vs white: 5.76:1 (WCAG AA). */
  --primitive-color-purple-700: #6d28d9; /** Purple hover state. */
  --primitive-color-purple-800: #5b21b6; /** Purple active/pressed state. */
  --primitive-color-gray-50: #f5f6f7; /** Lightest surface gray. Used as background.alt in decision-engine — secondary panels, table row backgrounds. Contrast vs gray.900: 12.1:1 (WCAG AAA). */
  --primitive-color-gray-100: #e8eaed; /** Subtle border. Used as border.muted in decision-engine — hairline dividers, subtle separators. */
  --primitive-color-gray-200: #d8dce0; /** Standard border. Used as border.default in decision-engine — input outlines, card edges, table borders. */
  --primitive-color-gray-300: #c0c4ce; /** Elevated gray border step for DE light mode. Between border-default (gray.200) and border-hover (blue.700). Used for structural chrome borders — headers, card frames, prominent dividers. */
  --primitive-color-gray-500: #5e6e88; /** Muted text on white. Used as foreground.muted in decision-engine. Contrast vs white: 5.17:1 (WCAG AA). Previous value #767686 calculated to 4.46:1 — barely fails AA despite the documented 4.57:1 figure. Corrected 2026-04-27. */
  --primitive-color-gray-600: #4e5f79; /** Tertiary text on white — sits between foreground.muted (gray.500, 5.17:1) and foreground.alt (gray.700, 8.9:1). Cool blue-gray consistent with the DE palette character. Contrast vs white: ~6.2:1 (WCAG AA). Use for helper/descriptor text that should read as supplemental without the passive 'disabled' feel of muted. */
  --primitive-color-gray-700: #4a4a5a; /** Secondary text on white. Used as foreground.alt in decision-engine. Contrast vs white: 8.9:1 (WCAG AAA). */
  --primitive-color-gray-900: #1a1a2e; /** Near-black with a cool cast. Used as foreground.default in decision-engine — primary headings, body copy, labels. Contrast vs white: 16.1:1 (WCAG AAA). */
  --primitive-color-gray-950: #0f1a2e; /** Deepest navy. Used as foreground.primary in decision-engine — the darkest text value, for the most prominent labels and headings where maximum contrast is needed. Contrast vs white: 17.39:1 (WCAG AAA). */
  --primitive-color-gray-navy: #3a4663; /** Secondary text — navy-tinted mid-tone. Used as foreground.secondary in decision-engine. Named slot rather than a numeric step — this navy blue-gray is perceptually darker than gray.700 (#4A4A5A) due to its chromatic shift, making numeric sequencing impossible without inversion. Contrast vs white: 9.39:1 (WCAG AAA). */
  --primitive-color-arctic-50: #f5f8fc; /** Arctic page canvas. Used as background.default in decision-engine — replaces pure white for a cooler, calmer data-UI surface. Contrast vs gray.900 text: 15.2:1 (WCAG AAA). */
  --primitive-color-arctic-100: #f0f4fa; /** Arctic elevated surface. Used as background.elevated in decision-engine — cards, modals, popovers floating above the canvas. */
  --primitive-color-arctic-150: #ebf0f8; /** Arctic secondary surface. Used as background.alt in decision-engine — table row alternates, panel backgrounds, input fills. */
  --primitive-color-arctic-200: #e2eaf5; /** Arctic hover surface. Used as background.hover in decision-engine — ghost-button and passive-surface hover fills. */
  --primitive-color-arctic-300: #d8e4f0; /** Arctic hairline border. Used as border.muted in decision-engine — table row separators, subtle dividers. */
  --primitive-color-arctic-400: #c8d6ea; /** Arctic standard border. Used as border.default in decision-engine — input outlines, card edges, table borders. */
  --primitive-color-arctic-500: #b0c4d8; /** Arctic elevated border. Used as border.elevated in decision-engine — structural chrome: headers, card frames, prominent dividers. */
  --primitive-color-arctic-600: #7a8fa9; /** Arctic legible edge. The lightest arctic step clearing the SC 1.4.11 non-text floor on the arctic canvas (3.11:1 vs arctic.50). Used as border.default in decision-engine — functional borders on inputs and interactive controls. */
  --primitive-color-slate-200: #e2e7f0; /** Light slate chip surface. Used as background.inverted in decision-engine — AND/OR logic chips; distinct from white form inputs without being heavy. Pair with foreground.on-inverted (slate.700, ~7:1). */
  --primitive-color-slate-400: #a8b0be; /** Washed-out slate for WCAG-exempt inactive UI elements (unselected segmented-control labels and similar non-text-critical chrome). Used as foreground.inactive in decision-engine. Deliberately sub-AA — do not use for content text. */
  --primitive-color-slate-700: #2c3a55; /** Dark navy-slate text on light chip surfaces. Used as foreground.on-inverted in decision-engine — AND/OR chip labels on slate.200 (~7:1 AAA). */
  --primitive-color-indigo-100: #e0e7ff; /** Light indigo tint for chip/tag fills. Use via color.background.accent-indigo. */
  --primitive-color-indigo-700: #4338ca; /** Saturated indigo for bold accent fills. Contrast vs white: 7.98:1 (AAA). Use via color.background.accent-indigo-bold. */
  --primitive-color-sky-100: #e0f2fe; /** Light sky tint for chip/tag fills. Use via color.background.accent-sky. */
  --primitive-color-sky-700: #0369a1; /** Saturated sky blue for bold accent fills. Contrast vs white: 5.90:1 (AA). Use via color.background.accent-sky-bold. */
  --primitive-color-emerald-700: #047857; /** Saturated emerald for bold accent fills. Contrast vs white: 5.47:1 (AA). Use via color.background.accent-green-bold. */
  --primitive-color-violet-100: #f5f3ff; /** Very light violet tint for DE light-mode chip/tag fills and callout panels with violet emphasis. Provisional — value may be refined. */
  --primitive-color-violet-300: #c4b5fd; /** Light violet for dark-theme accent text and icon accents. High contrast on dark canvases. Referenced by: color.foreground.accent-violet. */
  --primitive-color-violet-950: #18102e; /** Dark violet chip fill. Dark-theme background accent — subtle chip/tag fills, callout panels with violet emphasis. Referenced by: color.background.accent-violet. */
  --primitive-color-amber-50: #fffbeb; /** Lightest amber tint. DE light-mode chip/tag fills and callout panels with warm emphasis. Lighter and less saturated than amber.100. */
  --primitive-color-amber-100: #fef3c7; /** Very light amber tint. Warning alert backgrounds in DE. */
  --primitive-color-amber-300: #fcd34d; /** Warm amber for dark-theme accent text and icon accents. Very high contrast on dark canvases. Referenced by: color.foreground.accent-amber. */
  --primitive-color-amber-500: #d97706; /** Medium amber. Warning fill in light-mode (DE). Dark text required: #0A0D0A on this = 6.8:1 AA. */
  --primitive-color-amber-600: #b45309; /** Saturated amber for bold accent fills — avatar backgrounds, identity badges. Contrast vs white: 5.02:1 (AA). Use via color.background.accent-amber-bold. */
  --primitive-color-amber-700: #92400e; /** Dark amber. Warning text in light-mode (DE). On white: 7.1:1 AA+. */
  --primitive-color-amber-900: #78350f; /** Deepest amber-brown. Used as foreground.warning-dark in decision-engine — chip-on-tint warning text (e.g. OR-logic chips on amber tints) where amber.700 lacks contrast. Backported from the decisioning-table prototype (parsimony#70 §D). */
  --primitive-color-amber-950: #221b08; /** Dark amber chip fill. Dark-theme background accent — subtle chip/tag fills, callout panels with warm amber emphasis. Referenced by: color.background.accent-amber, color.background.warning-alt. */
  --primitive-icon-xs: 12px; /** 12px. Inline glyph size — icon inside a badge, status dot, or tight metadata row. */
  --primitive-icon-sm: 16px; /** 16px. Compact icon — inline with small labels, input prefix/suffix icons, tight toolbar icons. Minimum size for interactive icons. */
  --primitive-icon-md: 20px; /** 20px. Standard icon — default for most UI icons beside labels (nav items, button icons, list row glyphs). Pairs with font.label.medium. */
  --primitive-icon-lg: 24px; /** 24px. Prominent icon — section header icons, standalone icon buttons. Pairs with font.label.large. */
  --primitive-icon-xl: 32px; /** 32px. Large standalone icon — feature highlights, empty state graphics. Not for inline-with-text use. */
  --primitive-letter-spacing-tight: -0.01em; /** Slightly reduced tracking. Used for large display text where modest tracking reduction improves visual weight. Referenced by: letterSpacing.display. */
  --primitive-letter-spacing-tightest: -0.025em; /** Most reduced tracking in the system. Used for headings to tighten letter-spacing at medium display sizes. Referenced by: letterSpacing.title. */
  --primitive-letter-spacing-normal: 0em; /** Default tracking. No adjustment to the typeface's built-in letter-spacing. The baseline for all body text and most UI text. Referenced by: letterSpacing.body. */
  --primitive-letter-spacing-subtle: 0.01em; /** Barely-open tracking — a third of `wide`. Used by the decision-engine label override: Geist at data-UI density reads better with minimal tracking than the base 0.03em. Referenced by: decision-engine letterSpacing.label. */
  --primitive-letter-spacing-wide: 0.03em; /** Slightly open tracking. Used for UI labels and navigation where a small amount of open tracking improves readability at small sizes. Referenced by: letterSpacing.label. */
  --primitive-letter-spacing-wider: 0.1em; /** Generously open tracking. For all-caps labels and display contexts where wide tracking is a deliberate typographic choice. Do not use at body sizes — wide tracking at 16px or below reads as broken text. Referenced by: letterSpacing.all-caps. */
  --primitive-duration-fast: 120ms; /** Instant feedback. Use for hover state color changes, focus ring appearance, and any interaction where the UI must feel immediately responsive. At 120ms, the transition is felt but not watched. Referenced by: motion.duration.instant. */
  --primitive-duration-normal: 200ms; /** Standard transition. Use for expand/collapse, dropdown menus, tooltip appearance, and most component state changes. Fast enough to feel snappy; slow enough to be legible. Referenced by: motion.duration.standard. */
  --primitive-duration-slow: 350ms; /** Deliberate transition. Use for page-level transitions, modal entry/exit, and large layout changes where the motion needs to be noticed and tracked by the eye. Do not use for simple hover or focus states. Referenced by: motion.duration.emphasized. */
  --primitive-delay-none: 0ms; /** No delay. The transition starts the moment the property changes. The default delay for every composite transition token in this system. Referenced by: motion.transition.* (all). */
  --primitive-easing-default: cubic-bezier(0.25, 0.1, 0.25, 1); /** General-purpose easing (CSS ease). A gentle acceleration and deceleration. Use when the motion has no clear directional intent. Referenced by: motion.easing.default. */
  --primitive-easing-in: cubic-bezier(0.42, 0, 1, 1); /** Ease-in. Starts slow, ends fast. Use for elements that are exiting or being dismissed. Referenced by: motion.easing.exit. */
  --primitive-easing-out: cubic-bezier(0, 0, 0.58, 1); /** Ease-out. Starts fast, decelerates to rest. Use for elements entering the screen. Referenced by: motion.easing.enter. */
  --primitive-easing-in-out: cubic-bezier(0.42, 0, 0.58, 1); /** Ease-in-out. Accelerates then decelerates symmetrically. Use for elements moving from one position to another within the viewport. Referenced by: motion.easing.move. */
  --primitive-radius-none: 0; /** Sharp corners. Use when the component should read as rigid, precise, or grid-locked — code blocks, data tables, horizontal rules, and structural layout elements. The default aesthetic for this system; rounding is applied intentionally, not by default. Referenced by: unmapped. */
  --primitive-radius-sm: 4px; /** Subtle rounding. Barely perceptible — softens a component without departing from the sharp aesthetic. Use for inputs, small tags, and elements where a hint of friendliness is appropriate but the component still reads as structured. Referenced by: unmapped. */
  --primitive-radius-md: 8px; /** Standard rounding. Visibly rounded without feeling soft. Use for buttons, dropdown menus, select controls, and most interactive UI elements. The default rounding for actionable components. Referenced by: unmapped. */
  --primitive-radius-lg: 12px; /** Comfortable rounding. Use for cards, panels, and contained content regions. Reads as a finished surface rather than a raw container. Referenced by: unmapped. */
  --primitive-radius-xl: 16px; /** Prominent rounding. Use for modals, hero cards, and large featured surfaces where the rounding is a deliberate design choice rather than a subtle softening. Do not overuse — it competes with the system's sharp-corner default. Referenced by: unmapped. */
  --primitive-radius-full: 9999px; /** Pill or circle. Always fully rounded regardless of element size. Use for status badges, avatar circles, tag chips, toggle switches, and decorative pills. The value 9999px ensures a perfect pill at any width or height. Referenced by: unmapped. */
  --primitive-shadow-none: 0 0 0 0 rgba(0,0,0,0); /** No shadow. Flat — the element sits flush with its background with no elevation cue. Use when depth is communicated by background color (background.alt) rather than shadow, or when the component intentionally reads as part of the surface. Referenced by: unmapped. */
  --primitive-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.08); /** Subtle lift. Minimal elevation cue — just enough to separate an element from its parent surface without creating strong depth. Use for inputs on hover/focus, inline dropdowns, and elements that need a light sense of separation. Referenced by: unmapped. */
  --primitive-shadow-md: 0 2px 8px 0 rgba(0,0,0,0.12); /** Standard card elevation. Clear separation from the background — the component reads as floating above the canvas. Use for cards, toolbars, and contained panels. The most common shadow in the system. Referenced by: unmapped. */
  --primitive-shadow-lg: 0 6px 20px 0 rgba(0,0,0,0.16); /** Overlay elevation. Strong depth cue — the element is clearly above the page layer. Use for modals, context menus, popover panels, and any element that temporarily overlays content. Referenced by: unmapped. */
  --primitive-shadow-xl: 0 12px 40px 0 rgba(0,0,0,0.24); /** Maximum elevation. The strongest shadow in the system — reserved for dialogs, full-screen drawers, and toast notifications that must read as highest-layer content. Do not use for standard cards or panels; it will feel overblown. Referenced by: unmapped. */
  --primitive-space-3xs: 2px; /** Hairline. For optical adjustments, icon-to-label nudges, and micro-corrections that are not real spacing they are just making something look right. Not for padding or margin. Intentionally unmapped from semantic tokens. */
  --primitive-space-2xs: 4px; /** Micro spacing. Inline icon-to-text margins, gap between a badge and its label, tight internal element nudges. The smallest value used for genuine spacing (not just optical correction). Referenced by: spacing.micro. */
  --primitive-space-xs: 8px; /** Small spacing. Compact internal element padding the tightest spacing that reads as intentional breathing room. Referenced by: spacing.tight. */
  --primitive-space-sm: 12px; /** Form-level spacing. Gaps between list items, input internal padding, spacing between closely related inline elements. Referenced by: spacing.inline. */
  --primitive-space-md: 16px; /** Default spacing. The baseline unit if there is no reason to go tighter or looser, this is the value. Standard internal padding for most components. Referenced by: spacing.element. */
  --primitive-space-lg: 24px; /** Comfortable spacing. Card padding, gap between a label and its associated content, space between sibling components. Referenced by: spacing.component. */
  --primitive-space-xl: 32px; /** Generous spacing. Grid column gaps, space between a heading and its content block, outer padding for container elements. Referenced by: spacing.group. */
  --primitive-space-2xl: 48px; /** Layout spacing. Section padding, gap between major layout regions. Referenced by: spacing.layout. */
  --primitive-space-3xl: 64px; /** Large section break. Vertical rhythm between major content sections on a page the beat between distinct page blocks that are not full hero-level breaks. Referenced by: spacing.block. */
  --primitive-space-4xl: 80px; /** Page-level spacing. Generous vertical separation between top-level page sections. Referenced by: spacing.page. */
  --primitive-space-5xl: 128px; /** Hero and full-bleed spacing. Maximum vertical space for hero sections, full-bleed dividers, and deliberate empty space used as a design element. Referenced by: spacing.section. */
  --primitive-font-family-sans: 'Space Grotesk'; /** Geometric sans-serif. Used for all titles, UI labels, navigation, and interface text. Its clean, slightly technical character pairs well with the terminal-green aesthetic without feeling cold. Referenced by: font.title.*, font.label.*. */
  --primitive-font-family-serif: Spectral; /** Humanist serif designed for screen reading. Used for all body and long-form prose. Its warmth and legibility at reading sizes makes it the right counterpart to Space Grotesk's structure. Referenced by: font.body.*. */
  --primitive-font-family-mono: 'JetBrains Mono'; /** Monospaced typeface designed for code. Optimised for readability at small sizes with clear distinction between similar characters (0/O, 1/l/I). Reserved for code blocks, inline code, and terminal-style UI elements. Referenced by: font.code. */
  --primitive-font-weight-light: 300; /** Light weight. Used for all title and display text — the low weight against large sizes creates the elegant, airy quality of the heading style. Do not use at body sizes or below; 300 at small sizes reduces legibility. Referenced by: font.title.*. */
  --primitive-font-weight-regular: 400; /** Regular weight. The default for all body copy, UI labels, code, and most interface text. Referenced by: font.body.*, font.label.*, font.code. */
  --primitive-font-weight-medium: 500; /** Medium weight. Not currently mapped to any semantic token. Reserved for future component-level emphasis tokens (e.g., active nav label, form field label). */
  --primitive-font-weight-semibold: 600; /** Semibold weight. Not currently mapped to any semantic token. Reserved for future strong emphasis patterns. */
  --primitive-font-weight-bold: 700; /** Bold weight. Not currently mapped to any semantic token. Reserved for future strong emphasis patterns where semibold is insufficient. */
  --primitive-font-size-xs: 0.75rem; /** 12px. Fine print, captions, meta text. The smallest size for standard UI — use sparingly and only for non-critical content. One step above font.size.2xs (10px). Referenced by: font.body.small, font.label.small, font.mono-label-small. */
  --primitive-font-size-sm: 0.875rem; /** 14px. Secondary UI text — navigation, supporting labels, secondary body. Referenced by: font.body.medium, font.label.medium, font.code. */
  --primitive-font-size-base: 1rem; /** 16px. The default reading size for body text and prominent UI labels. Referenced by: font.body.large, font.label.large. */
  --primitive-font-size-md: 1.25rem; /** 20px. Sub-section heading size — h3-level headings in editorial and UI contexts. Referenced by: font.title.small. */
  --primitive-font-size-lg: 1.5rem; /** 24px. Section heading size — h2-level headings. Referenced by: font.title.medium. */
  --primitive-font-size-2xl: 2rem; /** 32px. Primary page heading size — h1-level headings in editorial contexts. Referenced by: font.title.large. */
  --primitive-font-size-3xl: 2.5rem; /** 40px. Display size — hero text, splash statements, page-defining moments. The largest size in the system. Referenced by: font.display. */
  --primitive-font-size-2xs: 0.625rem; /** 10px. Sub-caption and xsmall label size — below the system minimum for body text. Use only for tightly constrained UI micro-labels such as color chip annotations, icon badges, or fine decorative text where legibility at larger sizes would break the layout. Referenced by: font.label.xsmall, font.label-strong.xsmall, font.mono-label.xsmall. */
  --primitive-font-line-height-tight: 1.1; /** For large display and hero text only. At 1.1, lines sit close together — visually intentional at large sizes but unreadable at body sizes. Referenced by: font.title.large. */
  --primitive-font-line-height-snug: 1.25; /** For headings and UI labels. Enough breathing room for multi-line labels without excess space. Referenced by: font.title.medium, font.title.small, font.label.*. */
  --primitive-font-line-height-normal: 1.6; /** For standard body text. Comfortable reading rhythm at body sizes. Referenced by: font.body.*, font.code. */
  --primitive-font-line-height-relaxed: 1.7; /** For long-form prose at larger sizes (e.g., .blog body text override). Not currently mapped to a semantic token — reserved for the dot-blog brand override. */
  --color-background-default: var(--primitive-color-green-950); /** Base canvas #0A0D0A. Use for every page background and full-bleed section. Not for cards or elevated elements. */
  --color-background-alt: var(--primitive-color-green-900); /** Elevated surface #1E241E. Use for cards, panels, code blocks, inputs, tooltips. One subtle step above canvas. */
  --color-background-action: var(--primitive-color-green-accent); /** Interactive fill #4ADE6E. Use for filled primary buttons, selected states, active toggles. Pair with foreground.on-action. */
  --color-background-action-hover: var(--primitive-color-green-accent-hover); /** Hover fill for primary action elements. 16% darker than background.action. Use for button hover backgrounds when the border matches the background. */
  --color-background-action-active: var(--primitive-color-green-accent-active); /** Active/pressed fill for primary action elements. 30% darker than background.action. Use for the moment a button is held down. */
  --color-background-disabled: var(--primitive-color-green-900); /** Fill for disabled interactive elements (inputs, buttons, selects). Same value as background.alt — disabled controls blend into elevated surfaces, signalling they are part of the layout but not actionable. */
  --color-background-accent-green: var(--primitive-color-green-chip); /** Dark green tint #0F2016. Subtle chip/tag fills, callout panels with green emphasis. Pair with foreground.accent-green for text. */
  --color-background-accent-blue: var(--primitive-color-blue-950); /** Dark blue tint #0D1830. Subtle chip/tag fills, callout panels with blue emphasis. Pair with foreground.accent-blue for text. */
  --color-background-accent-violet: var(--primitive-color-violet-950); /** Dark violet tint #18102E. Subtle chip/tag fills, callout panels with violet emphasis. Pair with foreground.accent-violet for text. */
  --color-background-accent-amber: var(--primitive-color-amber-950); /** Dark amber tint #221B08. Subtle chip/tag fills, callout panels with warm amber emphasis. Pair with foreground.accent-amber for text. */
  --color-background-accent-indigo-bold: var(--primitive-color-indigo-700); /** Saturated indigo fill for bold accent surfaces — avatar backgrounds, identity badges. Pair with foreground.accent-on-indigo (white). Contrast vs white: 7.98:1 AAA. */
  --color-background-accent-sky-bold: var(--primitive-color-sky-700); /** Saturated sky blue fill for bold accent surfaces — avatar backgrounds, identity badges. Pair with foreground.accent-on-sky (white). Contrast vs white: 5.90:1 AA. */
  --color-background-accent-green-bold: var(--primitive-color-emerald-700); /** Saturated emerald fill for bold accent surfaces — avatar backgrounds, identity badges. Pair with foreground.accent-on-green (white on dark fills). Contrast vs white: 5.47:1 AA. */
  --color-background-accent-amber-bold: var(--primitive-color-amber-600); /** Saturated amber fill for bold accent surfaces — avatar backgrounds, identity badges. Pair with white text (DS debt: accent-on-amber is dark for tints). Contrast vs white: 5.02:1 AA. */
  --color-background-danger: var(--primitive-color-red-600); /** Danger fill #C8002E. Use for filled destructive buttons (delete, remove). Always pair with foreground.on-danger (white, 6.01:1 AA). Moved from red.500 2026-07-02: white on #E73027 was 4.33:1 (AA fail); red.600 also aligns the danger fill with decision-engine's. */
  --color-background-danger-alt: var(--primitive-color-red-950); /** Subtle danger tint #2A0A0A — dark red for error alert/badge backgrounds, matching the other feedback -alt tints. Pair with foreground.danger (light red) for text. DE overrides to a warm light-red tint. */
  --color-background-success: var(--primitive-color-green-accent); /** Strong success fill — success badges, status pills, success CTA fills. Pair with foreground.on-success (dark text). Base dark: phosphor green. */
  --color-background-success-alt: var(--primitive-color-green-chip); /** Subtle success tint — success alert/banner backgrounds. Base dark: deep green tint #0F2016. */
  --color-background-warning: var(--primitive-color-amber-300); /** Strong warning fill — warning badges, status pills. Pair with foreground.on-warning (dark text). */
  --color-background-warning-alt: var(--primitive-color-amber-950); /** Subtle warning tint — warning alert/banner backgrounds. Base dark: deep amber tint #221B08. */
  --color-background-info: var(--primitive-color-blue-700); /** Strong info fill — info badges, status pills. Pair with foreground.on-info (white). */
  --color-background-info-alt: var(--primitive-color-blue-950); /** Subtle info tint — info alert/banner backgrounds. Base dark: deep blue tint #0D1830. */
  --color-foreground-default: var(--primitive-color-green-200); /** Primary text and icons #C8CFC4. Use for headings, body copy, nav labels. Contrast vs background.default: 12.26:1 AAA. */
  --color-foreground-alt: var(--primitive-color-green-400); /** Secondary text and icons #A0A89A. Use for metadata, timestamps, supporting labels. Contrast vs background.default: 7.97:1 AA. */
  --color-foreground-muted: var(--primitive-color-green-600); /** Muted text — secondary labels, captions, timestamps, metadata. Also use for input placeholder text (foreground.disabled exists for disabled element text — placeholder copy on active inputs uses muted, not disabled). */
  --color-foreground-disabled: var(--primitive-color-green-900); /** Text and icons on disabled elements. Deeply receded against the dark canvas — communicates unavailability without being invisible. WCAG contrast exemption applies to disabled text (1.4.3 exception). */
  --color-foreground-action: var(--primitive-color-green-accent); /** Interactive text and icons #4ADE6E. Use for links, active nav items, interactive labels. Never for static text. Contrast: 11.13:1 AAA. */
  --color-foreground-accent-green: var(--primitive-color-green-accent); /** Phosphor green accent #4ADE6E. Use for emphasis text, icons, and labels that should read in the green family. Pair with background.accent-green for tinted surfaces. Contrast vs background.default: 11.13:1 AAA. */
  --color-foreground-accent-blue: var(--primitive-color-blue-sky); /** Light blue accent #93C5FD. Use for emphasis text, icons, and labels that should read in the blue family. Pair with background.accent-blue for tinted surfaces. Contrast vs background.default: ~7.5:1 AA. */
  --color-foreground-accent-violet: var(--primitive-color-violet-300); /** Light violet accent #C4B5FD. Use for emphasis text, icons, and labels that should read in the violet family. Pair with background.accent-violet for tinted surfaces. Contrast vs background.default: ~7:1 AA. */
  --color-foreground-accent-amber: var(--primitive-color-amber-300); /** Warm amber accent #FCD34D. Use for emphasis text, icons, and labels that should read in the warm/amber family. Pair with background.accent-amber for tinted surfaces. Contrast vs background.default: ~12:1 AAA. */
  --color-foreground-on-action: var(--primitive-color-green-950); /** Text/icons on background.action #0A0D0A. Use for labels inside filled interactive components (e.g. primary button). Contrast vs action: 11.13:1 AAA. */
  --color-foreground-danger: var(--primitive-color-red-400); /** Error/destructive text and icons #F87171. Use for delete labels, validation errors, Deny outcomes, and danger alert/badge text. Light red so it reads on the canvas (7.06:1 AAA) and on the dark danger-alt tint (6.62:1 AA). Consistent with the other bright feedback foregrounds. */
  --color-foreground-on-danger: var(--primitive-color-neutral-white); /** Text/icons on background.danger #FFFFFF. Use inside filled destructive components (e.g. filled delete button). Contrast vs background.danger (red.600): 6.01:1 AA. Never on white or dark canvases. */
  --color-foreground-success: var(--primitive-color-green-accent); /** Success text and icons. Base dark: phosphor green #4ADE6E — vivid and legible on dark canvas (11.1:1 AAA). */
  --color-foreground-on-success: var(--primitive-color-green-950); /** Text/icons on success fill backgrounds. Near-black on vivid green — high contrast (11.1:1 AAA). */
  --color-foreground-warning: var(--primitive-color-amber-300); /** Warning text and icons. Base dark: amber.400 #FCD34D — bright amber on dark canvas (13.6:1 AAA). */
  --color-foreground-on-warning: var(--primitive-color-green-950); /** Text/icons on warning fill backgrounds. Near-black on amber — always use dark text on amber fills. */
  --color-foreground-info: var(--primitive-color-blue-sky); /** Info text and icons. Base dark: blue.sky #93C5FD — light blue on dark canvas (10.8:1 AAA). */
  --color-foreground-on-info: var(--primitive-color-neutral-white); /** Text/icons on info fill backgrounds. White on blue fill. */
  --color-foreground-accent-on-green: var(--primitive-color-green-950); /** Text/icons on green accent tint fills. Near-black on dark theme. For bold green fills, white text is needed — DE overrides to white. */
  --color-foreground-accent-on-blue: var(--primitive-color-green-950); /** Text/icons on blue accent fills. Near-black on dark theme. */
  --color-foreground-accent-on-violet: var(--primitive-color-green-950); /** Text/icons on violet accent fills. Near-black on dark theme. */
  --color-foreground-accent-on-amber: var(--primitive-color-green-950); /** Text/icons on amber accent fills. Near-black on dark theme. */
  --color-foreground-accent-on-indigo: var(--primitive-color-neutral-white); /** Text/icons on indigo accent fills. White — indigo-700 provides 7.98:1 contrast (AAA). */
  --color-foreground-accent-on-sky: var(--primitive-color-neutral-white); /** Text/icons on sky accent fills. White — sky-700 provides 5.90:1 contrast (AA). */
  --color-foreground-accent-on-amber-bold: var(--primitive-color-neutral-white); /** Text/icons on amber bold accent fills (background.accent-amber-bold = amber.600 #B45309). White — 5.02:1 AA contrast. Use for avatar initials, identity badge labels on saturated amber surfaces. Do not confuse with foreground.accent-on-amber (near-black), which is for amber tint backgrounds. */
  --color-foreground-accent-on-green-bold: var(--primitive-color-neutral-white); /** Text/icons on green-bold accent fills (background.accent-green-bold = emerald.600). White — 5.47:1 AA contrast. Distinct from foreground.accent-on-green (near-black #0A0D0A), which is for the tint background. Use this for avatar initials and identity badges on saturated green surfaces. */
  --color-border-default: var(--primitive-color-green-700); /** Standard legible border #5C685A. The default edge for most UI — input outlines, control boundaries, card edges where the edge should read. Clears the SC 1.4.11 non-text floor on the canvas (3.33:1) while staying below border.hover (6.32:1) so the state ladder holds. For deliberately quiet, decorative edges use border.alt. Changed from green.900 (#1E241E, 1.23:1 — invisible where it was the only boundary indicator) 2026-07-02, #28. */
  --color-border-alt: var(--primitive-color-green-900); /** The quiet boundary OF a surface #1E241E — card, menu, panel, and dialog frames; decorative outlines; container edges (the previous border.default value). For separator lines WITHIN a surface (table rows, menu dividers) use border.muted, one rung below. Exempt from SC 1.4.11 (decorative, not required to identify a control) — never use as the only boundary of an interactive component. Shares value with background.alt but different intent. Rule codified 2026-07-02 from observed usage: alt = frames, muted = rows. */
  --color-border-elevated: var(--primitive-color-green-800); /** Structural chrome borders — headers, card frames, section dividers, prominent UI edges. One step above border-alt in the decorative ladder (muted < alt < elevated); not interactive. Sits below border.default in contrast — for a legible functional edge use border.default itself. */
  --color-border-hover: var(--primitive-color-green-600); /** Border on interactive elements in hover state. Mid-toned green — clearly visible against the dark canvas, signals interactivity without using the full accent. */
  --color-border-active: var(--primitive-color-green-400); /** Border on interactive elements in active/pressed state. Lighter than hover — maximum border prominence for the held-down moment. */
  --color-border-action: var(--primitive-color-green-accent); /** Border for interactive outlined controls — the secondary (ghost) button. Vivid phosphor green #4ADE6E; a resting accent border is rule-compliant here because the control is interactive. Matches the primary button fill (filled primary vs outlined secondary). Contrast vs background.default: 11.13:1; vs background.alt: 9.02:1. */
  --color-border-focus: var(--primitive-color-green-accent); /** Focus ring color. Applied as an outline on keyboard-focused interactive elements. Vivid phosphor green — maximum visibility against the dark canvas. Always pair with a non-color indicator (outline offset) for non-color-blind users. */
  --color-border-disabled: var(--primitive-color-green-950); /** Border on disabled elements. Recedes to near-canvas — the element visually withdraws. Combine with reduced opacity on the overall component. */
  --color-border-muted: var(--primitive-color-green-chip); /** Separator lines WITHIN a surface #0F2016 — table row separators, menu/list dividers, section rules inside a panel. Near-invisible hairline; the lowest rung of the decorative ladder (muted < alt < elevated). For the boundary OF a surface (card/menu/panel frames) use border.alt, one rung above. Base dark: intentionally very subtle — use spacing + background.alt to create separation in dark contexts. Rule codified 2026-07-02 from observed usage: muted = rows, alt = frames. */
  --font-family-sans: var(--primitive-font-family-sans); /** Sans-serif family for titles, labels, and UI text. Base: Space Grotesk. Decision-engine override: Geist. */
  --font-family-serif: var(--primitive-font-family-serif); /** Serif family for body and long-form prose. Base: Spectral. */
  --font-family-mono: var(--primitive-font-family-mono); /** Monospaced family for code and technical UI labels. Base: JetBrains Mono. */
  --icon-size-compact: var(--primitive-icon-sm); /** Compact icon. 16px — use in dense UI contexts: input adornments, tag/chip icons, tight toolbar rows. The smallest interactive icon size. */
  --icon-size-default: var(--primitive-icon-md); /** Default icon. 20px — the standard icon size for most UI contexts: nav items, button icons, list row glyphs, form icons. When in doubt, use this. */
  --icon-size-large: var(--primitive-icon-lg); /** Large icon. 24px — for icons that anchor a UI region: section headers, standalone icon buttons, prominent action icons. */
  --icon-size-xl: var(--primitive-icon-xl); /** Extra-large icon. 32px — reserved for empty states, onboarding illustrations, and feature highlight graphics. Never inline with text. */
  --letter-spacing-display: var(--primitive-letter-spacing-tight); /** Display tracking. Applied to the largest type on the page — hero headlines and page titles using font.display. At very large sizes, the typeface's default tracking reads as too loose; pulling it in slightly (-0.01em) restores optical density without over-tightening. Resolves to: -0.01em. */
  --letter-spacing-title: var(--primitive-letter-spacing-tightest); /** Title tracking. Applied to structural headings using font.title.large, font.title.medium, and font.title.small. Tighter tracking than display (-0.025em) helps headings read as a cohesive unit at mid-range sizes. Resolves to: -0.025em. */
  --letter-spacing-body: var(--primitive-letter-spacing-normal); /** Body tracking. No adjustment from the typeface's built-in tracking. The default for all Spectral body text — font.body.large, font.body.medium, font.body.small. Tracking adjustments at reading sizes typically hurt legibility more than they help. Do not tighten or open body text without a specific, tested reason. Resolves to: 0em. */
  --letter-spacing-label: var(--primitive-letter-spacing-wide); /** Label tracking. Slightly open tracking for small Space Grotesk UI text — navigation, button labels, captions, tag text. At small sizes (12–14px), a modest +0.03em opening improves legibility and gives the label a clean, structured feel. Use for font.label.small and font.label.medium. Resolves to: 0.03em. */
  --letter-spacing-all-caps: var(--primitive-letter-spacing-wider); /** All-caps tracking. Generously open tracking exclusively for text set in ALL CAPS. All-caps text at default or tight tracking reads as dense and unpolished — the wide +0.1em opening is the convention that makes it legible and intentional. Do not use at body sizes or mixed-case; it will read as broken text. Resolves to: 0.1em. */
  --motion-duration-instant: var(--primitive-duration-fast); /** Instant feedback. The shortest transition in the system — fast enough that the change feels immediate, but present enough to avoid a jarring cut. Use for hover color changes, focus ring appearance, active/pressed state toggles, and any micro-interaction where the UI must feel truly responsive. At 120ms, the motion is felt but not consciously watched. Resolves to: 120ms. */
  --motion-duration-standard: var(--primitive-duration-normal); /** Standard transition. The default duration for most state changes involving layout or visibility — dropdowns opening, tooltips appearing, accordions expanding, tabs switching. Fast enough to feel snappy; slow enough for the eye to register what changed. The workhorse of the motion system. Resolves to: 200ms. */
  --motion-duration-emphasized: var(--primitive-duration-slow); /** Emphasized transition. Reserved for large, page-level motions where the movement itself carries meaning — modal entry and exit, drawer slides, full-screen overlays, page transitions. The extra time lets the user's eye track the motion deliberately. Do not apply to hover states or small component toggles — 350ms on a button hover reads as broken. Resolves to: 350ms. */
  --motion-easing-enter: var(--primitive-easing-out); /** Easing for elements entering the screen or appearing. Ease-out: starts fast, decelerates to rest. The deceleration signals arrival — the element lands rather than snapping into place. Use for modals appearing, drawers sliding in, tooltips fading up, dropdowns opening. Resolves to: cubic-bezier(0, 0, 0.58, 1). */
  --motion-easing-exit: var(--primitive-easing-in); /** Easing for elements leaving the screen or disappearing. Ease-in: starts slow, accelerates to exit. The acceleration signals departure — the element moves away with purpose rather than drifting off. Use for modals closing, drawers retracting, tooltips fading out, dropdowns collapsing. Resolves to: cubic-bezier(0.42, 0, 1, 1). */
  --motion-easing-move: var(--primitive-easing-in-out); /** Easing for elements repositioning within the viewport. Ease-in-out: accelerates then decelerates symmetrically, giving the motion a smooth arc. Use for sliding panels, tab indicator underlines moving between tabs, loading indicators traversing a track, or any element traveling from one place to another without entering or exiting. Resolves to: cubic-bezier(0.42, 0, 0.58, 1). */
  --motion-easing-default: var(--primitive-easing-default); /** General-purpose easing. CSS ease — a gentle acceleration and deceleration with no strong directional character. Use when the transition has no meaningful direction — opacity fades, color shifts, scale pulses. Falls back gracefully for any motion where enter/exit/move semantics don't clearly apply. Resolves to: cubic-bezier(0.25, 0.1, 0.25, 1). */
  --radius-none: var(--primitive-radius-none); /** No rounding. For components that must read as rigid, grid-locked, or structural — code blocks, data tables, horizontal rules, layout dividers, and elements that deliberately read as part of the surface rather than floating above it. The default aesthetic for this system. Resolves to: 0. */
  --radius-sm: var(--primitive-radius-sm); /** Subtle rounding. Barely perceptible softening — the component retains a structured, sharp feel with just enough rounding to avoid reading as strictly rectilinear. Use for text inputs, small tags, inline chips, and compact UI elements where a minimal hint of friendliness is appropriate. Resolves to: 4px. */
  --radius-default: var(--primitive-radius-md); /** Default rounding. The standard border-radius for interactive components — buttons, dropdown menus, select controls, toggles, and most clickable UI elements. Visibly rounded without feeling soft or balloon-like. When in doubt about which radius to apply to an actionable component, use this one. Resolves to: 8px. */
  --radius-lg: var(--primitive-radius-lg); /** Large rounding. For contained content surfaces — cards, panels, sidebars, and info regions. Reads as a finished, elevated surface rather than a raw layout container. The rounding at this scale signals 'this is a discrete object' without being decorative. Resolves to: 12px. */
  --radius-xl: var(--primitive-radius-xl); /** Extra-large rounding. For hero cards, featured surfaces, and modals where the rounding is a conscious design decision rather than a subtle softening. Use sparingly — it competes with the system's sharp-corner default and should feel deliberate, not incidental. Resolves to: 16px. */
  --radius-full: var(--primitive-radius-full); /** Pill or circle. Always fully rounded regardless of element dimensions. Use for status badges, avatar circles, tag chips, toggle switches, and decorative pills. At 9999px, the element becomes a perfect pill at any width or height — no recalculation needed. Resolves to: 9999px. */
  --shadow-none: var(--primitive-shadow-none); /** No shadow. The element sits flush with its background — zero elevation cue. Use when depth is communicated by background color (color.background.alt) rather than shadow, or when the component is intentionally part of the surface rather than floating above it. Code blocks, data tables, inline elements. Resolves to: 0 0 0 0 rgba(0,0,0,0). */
  --shadow-raised: var(--primitive-shadow-sm); /** Raised elevation. Minimal lift — just enough to separate an element from its parent surface without creating strong depth. The element reads as slightly above the canvas but still close to it. Use for inputs on hover or focus, inline dropdowns, subtle interactive feedback. On a dark background, this shadow is nearly imperceptible at rest — which is correct. Resolves to: 0 1px 3px rgba(0,0,0,0.08). */
  --shadow-overlay: var(--primitive-shadow-lg); /** Overlay elevation. Strong depth cue — the element is clearly floating above the page layer. Use for context menus, popover panels, dropdown lists, and any element that temporarily overlays content without dimming the background. The jump from raised to overlay is intentionally large: there is no 'card' shadow in this system — cards use background.alt for separation instead. Resolves to: 0 6px 20px rgba(0,0,0,0.16). */
  --shadow-dialog: var(--primitive-shadow-xl); /** Dialog elevation. The maximum shadow in the system — reserved for components that must read as the highest layer regardless of page context: modals, full-screen drawers, bottom sheets, and toast notifications. The strong shadow (0 12px 40px) grounds a floating dialog against an already-dark background. Do not apply to cards, panels, or overlays — it will feel overblown. Resolves to: 0 12px 40px rgba(0,0,0,0.24). */
  --spacing-micro: var(--primitive-space-2xs); /** Micro spacing. For icon-to-text margins, gap between a badge and its label, and tight internal nudges within a single element. At 4px the gap signals that two things are part of the same unit — barely breathing room, not real separation. Resolves to: 4px. */
  --spacing-tight: var(--primitive-space-xs); /** Tight spacing. Between closely related items that belong to the same thought — e.g., an icon and its label, a checkbox and its text, stacked lines within a single element. At 8px, the gap is felt as belonging rather than separating. Resolves to: 8px. */
  --spacing-inline: var(--primitive-space-sm); /** Inline spacing. Between items that are related but distinct — e.g., items in a navigation row, pills in a tag group, or gaps in a horizontal list. Signals adjacency without implying the items are the same unit. Resolves to: 12px. */
  --spacing-element: var(--primitive-space-md); /** Element spacing. The default internal padding for most components — input fields, buttons, menu items, list rows. Sets the baseline breathing room inside a discrete UI unit. Also used between sibling elements within the same component zone. Resolves to: 16px. */
  --spacing-component: var(--primitive-space-lg); /** Component spacing. Between distinct UI components in a layout — e.g., the gap between a label and its input, between a card and the next card in a list, or between a toolbar and the content below it. Signals that two things are related but not the same. Resolves to: 24px. */
  --spacing-group: var(--primitive-space-xl); /** Group spacing. Between related groups of components within a layout zone — stacked form sections, card grid gaps, gap between a heading block and its content cluster. Fills the jump between component (24px) and layout (48px). Resolves to: 32px. */
  --spacing-layout: var(--primitive-space-2xl); /** Layout spacing. Between major layout regions within a page section — e.g., between a sidebar and main content, between a page header and the first content block, or between stacked content groups. Larger than component spacing but not a full section break. Resolves to: 48px. */
  --spacing-block: var(--primitive-space-3xl); /** Block spacing. Between major content blocks within a page section — distinct from component groupings but not a full section break. Use for the vertical gap between a text block and a media element, between a heading cluster and a feature grid, or between stacked editorial rows. Resolves to: 64px. */
  --spacing-page: var(--primitive-space-4xl); /** Page spacing. Between major editorial sections — the standard vertical separator for hero-to-content and section-to-section gaps in portfolio and documentation contexts. Larger than spacing.block (content-level rhythm) but not as expansive as spacing.section (full page breathing room). Resolves to: 80px. */
  --spacing-section: var(--primitive-space-5xl); /** Section spacing. Between top-level page sections — the full whitespace beat that tells the eye a new chapter has begun. Use for gaps between hero, features, testimonials, and footer regions. Not for component-level gaps; it will feel like the page fell apart. Resolves to: 128px. */
  --font-display: var(--primitive-font-weight-light) var(--primitive-font-size-3xl)/var(--primitive-font-line-height-tight) var(--font-family-sans); /** Display text. Space Grotesk 300 at 40px / 1.1 line-height. The largest type in the system — reserved for hero statements, splash headlines, and page-defining moments. This is not a structural heading; it is an expressive, editorial register. Do not use it to introduce sections or content groups — that is font.title.large's job. Use sparingly: one instance per page is typical. The tight line-height (1.1) is intentional at this scale, where lines read as a visual unit rather than separate lines. */
  --font-title-large: var(--primitive-font-weight-light) var(--primitive-font-size-2xl)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Primary page heading. Space Grotesk 300 at 32px / 1.25 line-height. The h1 equivalent — use for the main structural heading of a page or the first heading inside a major content section. One level below font.display, but this is a structural role where display is expressive. Most pages should have exactly one instance. */
  --font-title-medium: var(--primitive-font-weight-light) var(--primitive-font-size-lg)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Section heading. Space Grotesk 300 at 24px / 1.25 line-height. The h2 equivalent — use to introduce major sections within a page, blog post subheadings, and category or feature group headers. Clearly subordinate to title.large while still commanding attention. */
  --font-title-small: var(--primitive-font-weight-light) var(--primitive-font-size-md)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Sub-section heading. Space Grotesk 300 at 20px / 1.25 line-height. The h3 equivalent — use for nested content groups, tertiary sections within a blog post, and UI panel headers where a visual step down from title.medium is needed. The smallest size where the light weight still reads as intentionally editorial rather than just small text. */
  --font-body-large: var(--primitive-font-weight-regular) var(--primitive-font-size-base)/var(--primitive-font-line-height-normal) var(--font-family-serif); /** Default body and paragraph text. Spectral 400 at 16px / 1.6 line-height. The standard reading size for all prose content — articles, case study copy, Substack posts, and any extended text block. Use this as the default for all body content unless a specific size variation is needed. */
  --font-body-medium: var(--primitive-font-weight-regular) var(--primitive-font-size-sm)/var(--primitive-font-line-height-normal) var(--font-family-serif); /** Secondary body text. Spectral 400 at 14px / 1.6 line-height. Use for supporting prose that is present but subordinate — sidebar text, supplementary descriptions, secondary content blocks. Not for primary reading content. */
  --font-body-small: var(--primitive-font-weight-regular) var(--primitive-font-size-xs)/var(--primitive-font-line-height-normal) var(--font-family-serif); /** Tertiary body text and fine prose. Spectral 400 at 12px / 1.6 line-height. Use sparingly — for footnotes, endnotes, legal text, or other non-critical prose that must be present but should not draw attention. The serif at this size is still legible but clearly de-emphasised. */
  --font-label-large: var(--primitive-font-weight-regular) var(--primitive-font-size-base)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Prominent UI labels and section headers. Space Grotesk 400 at 16px / 1.25 line-height. Use for labels that introduce major UI sections, prominent navigation items, or any interface label that needs to carry visual weight without being a full title. The snug line-height reflects its UI role — tighter than body text. */
  --font-label-medium: var(--primitive-font-weight-regular) var(--primitive-font-size-sm)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Standard UI text. Space Grotesk 400 at 14px / 1.25 line-height. The workhorse label size — use for navigation links, button text, form field labels, tag labels, and most standard interface text. The default choice for any UI element that is not a heading, body copy, or fine print. */
  --font-label-small: var(--primitive-font-weight-regular) var(--primitive-font-size-xs)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Meta text, captions, and fine print. Space Grotesk 400 at 12px / 1.25 line-height. Use for timestamps, image captions, helper text, badges, and any label that needs to be present but clearly secondary. The sans-serif at this size remains legible where the serif (font.body.small) would feel more literary. */
  --font-label-xsmall: var(--primitive-font-weight-regular) var(--primitive-font-size-2xs)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Micro UI label. Space Grotesk 400 at 10px / 1.25 line-height. Use only where space is critically constrained — color chip annotations, icon overlays, tightly packed badges. Below this size legibility degrades significantly; prefer font.label.small whenever layout permits. */
  --font-label-strong-large: var(--primitive-font-weight-medium) var(--primitive-font-size-base)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Emphasized large label. Space Grotesk 500 at 16px / 1.25. Use for section header labels that need to carry more visual weight, active primary nav items. */
  --font-label-strong-medium: var(--primitive-font-weight-medium) var(--primitive-font-size-sm)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Emphasized standard label. Space Grotesk 500 at 14px / 1.25. The primary use case: button text, active nav links, selected tab labels, table column headers. */
  --font-label-strong-small: var(--primitive-font-weight-medium) var(--primitive-font-size-xs)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Emphasized small label. Space Grotesk 500 at 12px / 1.25. Use for active badge labels, selected filter chips, emphasized metadata — situations where small text needs to assert itself. */
  --font-label-strong-xsmall: var(--primitive-font-weight-medium) var(--primitive-font-size-2xs)/var(--primitive-font-line-height-snug) var(--font-family-sans); /** Emphasized micro UI label. Space Grotesk 500 at 10px / 1.25 line-height. Use for active or selected states of xsmall labels — e.g., a step indicator inside a color chip, or a selected micro badge. The medium weight helps the label assert itself at this very small size. */
  --font-code: var(--primitive-font-weight-regular) var(--primitive-font-size-sm)/var(--primitive-font-line-height-normal) var(--font-family-mono); /** Code blocks and inline code. JetBrains Mono 400 at 14px / 1.6 line-height. Use for all code samples, terminal output, inline code references, and any monospaced content. The slightly generous line-height (1.6) aids readability in multi-line code blocks. The terminal-style aesthetic of JetBrains Mono is intentionally coherent with the system's phosphor-green visual language. */
  --font-mono-label-xsmall: var(--primitive-font-weight-medium) var(--primitive-font-size-2xs)/var(--primitive-font-line-height-snug) var(--font-family-mono); /** Micro monospaced label. JetBrains Mono 500 at 10px / 1.25 line-height. Use for tightly constrained mono identifiers — color step numbers, token chip labels, compact code annotations. Smaller and heavier than font.mono-label-small; the medium weight compensates for the very small size. */
  --font-mono-label-small: var(--primitive-font-weight-regular) var(--primitive-font-size-xs)/var(--primitive-font-line-height-snug) var(--font-family-mono); /** Monospaced UI metadata label. JetBrains Mono 400 at 12px / 1.25 line-height. Use for inline token names, value readouts, technical identifiers, and any interface metadata that should read as code but at label scale — smaller and tighter than font.code. Common in design system tooling, token tables, dev-facing UIs. */
  --font-mono-label-strong-small: var(--primitive-font-weight-medium) var(--primitive-font-size-xs)/var(--primitive-font-line-height-snug) var(--font-family-mono); /** Emphasized monospaced UI label. JetBrains Mono 500 at 12px / 1.25 line-height. Use for all-caps category labels, active token identifiers, section markers in monospaced UI chrome. Same role as font.label-strong.small but in the mono family — use when the mono voice needs to assert itself. */
  --motion-transition-micro: var(--motion-duration-instant) var(--motion-easing-default) var(--primitive-delay-none); /** Micro-interaction transition. The fastest composite in the system, with directionless easing. Use for property changes that should feel instantaneous but not jarring: hover color shifts, focus ring fade-in, active/pressed background flips, checkbox tick reveals, link underline color swaps. Do not use for any motion that involves layout, size, or position change — at 120ms those read as twitchy. Resolves to: 120ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms. */
  --motion-transition-standard: var(--motion-duration-standard) var(--motion-easing-default) var(--primitive-delay-none); /** Standard component transition. The workhorse composite — pair with most state changes that involve visibility or layout: dropdown menus opening, tooltips appearing, accordions expanding, tabs switching, popovers fading in. Directionless easing keeps the motion neutral so the same token can run both directions without feeling lopsided. If the element is *clearly* entering or exiting and you want to underscore that, reach for motion.easing.enter or motion.easing.exit on a custom transition instead. Resolves to: 200ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms. */
  --motion-transition-emphasized: var(--motion-duration-emphasized) var(--motion-easing-move) var(--primitive-delay-none); /** Emphasized transition for layer-shifting motion. Reserved for full-screen or near-full-screen movement where the motion itself is part of the meaning: modal entry and exit, drawer slides, full-page sheet reveals, route-level transitions. The 350ms duration gives the eye time to follow; the symmetric in-out easing reads as a deliberate slide rather than an entrance or exit, which keeps the same token usable both ways. Do not apply to small components — emphasized timing on a hover or a dropdown feels broken and slow. Resolves to: 350ms cubic-bezier(0.42, 0, 0.58, 1) 0ms. */
  --motion-transition-move: var(--motion-duration-standard) var(--motion-easing-move) var(--primitive-delay-none); /** Repositioning transition. Standard duration paired with symmetric in-out easing — the right combination for elements that travel from one position to another within the viewport without entering or exiting. Use for tab indicator underlines sliding between tabs, segmented control thumbs, accordion content shifting siblings, drag-and-drop snap, sticky header offset changes. The arc-shaped easing gives the motion a sense of weight and direction that linear or ease-out would flatten. Resolves to: 200ms cubic-bezier(0.42, 0, 0.58, 1) 0ms. */
}

/* Reduced motion — WCAG 2.3.3. Token-level guard: every --motion-transition-*
   composite references these durations, so zeroing them stops token-driven
   motion system-wide. Appended by scripts/build-brands.mjs — build/ is
   generated, never hand-edit. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-instant: 0ms;
    --motion-duration-standard: 0ms;
    --motion-duration-emphasized: 0ms;
  }
}