/* Global - Hardware Design System ── Spacing scale ──────────────────────────────────────────────────────── All padding, margin, and gap values across the site follow a 4px-base scale: 2 · 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 · 64 · 96 (px) In rem (where used by older Hardware Design components): 0.125 · 0.25 · 0.5 · 0.75 · 1 · 1.25 · 1.5 · 2 · 3 · 4 · 6 (rem) Common applications: • Chip padding (badges, pills, status): 4px 8px (0.25rem 0.5rem) • Inline code chip: 2px 6px (0.125rem 0.375rem) • Card outer padding: 24px • Card internal section gap: 16px • Card divider-to-content space: 16px • Link/CTA row padding-y: 12px • Inter-row gap inside link lists: 4px • Section-to-section gap: 72px (root) / 8px (first in CH) When adding new spacing, snap to the scale. Off-scale values like 5, 10, 14, 18 px or 0.15rem are inconsistencies — convert to the nearest valid value. ───────────────────────────────────────────────────────────────────────── */ :root { /* Mintlify primary color override (RGB space notation) */ --primary: 146 17 17; --primary-light: 185 28 28; --primary-dark: 127 29 29; /* Brand red pair: --accent is the canonical brand surface (button bg, hero accents, inline link); --accent-strong is the AAA-safe text variant used when text sits over --accent-soft fills (tabs active, TOC active, chip text). #7d0e0e gives 8.6:1 on the --accent-soft + surface-2 composite vs --accent's 6.9:1 (below AAA). */ --accent: #921111; --accent-strong: #7d0e0e; --accent-soft: rgba(146, 17, 17, 0.12); /* Semantic status colors. Reuse the method-pill green family so success/granted/positive states share visual language with GET endpoints. WCAG AAA on light warm-paper surfaces: #055527 → 8.56:1 on surface-1, 7.51:1 on surface-2, 7.05:1 on surface-3. */ --success: #055527; --success-strong: #14532d; --success-soft: rgba(21, 128, 61, 0.12); --tab-background: rgb(240, 222, 222); --primary-bg-color-brighter-light: var(--accent-soft); --primary-bg-color-light: var(--accent); /* Light theme surface ladder — warm-paper family, monochromatic-warm (mirrors the dark theme's warm-charcoal layering). The previous pure-white system (#ffffff / #f7f8fa / #eef1f4) sat on a cool-neutral hue zone that fought the brand red. Three warm-paper steps extend across the entire site (not just landings) so every page reads as one continuous material. Step calibration: widened from a 6%/16% ladder to ~12%/27% so the page reads with the same elevation depth dark mode gets for free (Weber's law makes small luminance differences in dark space read as bigger perceptual steps; light mode needs the explicit jumps). Hue progression is intentional too — surface-1 is warm-neutral cream, surface-2 leans cream, surface-3 lands at bone/vellum. Together the luminance + chromatic steps give cards real lift against the page without leaning on shadows. Luminances: 0.948 / 0.827 / 0.773. AAA verified for text-strong, text-muted, accent (#921111), and success (#055527) against all three; border-subtle clears 3:1 UI on every step. */ --surface-1: #fbf9f7; --surface-2: #f0eadd; --surface-3: #ebe2cd; /* Diagram node/grouping fills (snippets/Diagrams.jsx). Decorative, theme-tuned: ink tint on light so boxes read as filled; the .dark block flips to a white tint so they keep presence on near-black. Meaning is never carried by these — only --accent/--success are semantic. */ --diagram-node: rgba(0, 0, 0, 0.05); --diagram-surface: rgba(0, 0, 0, 0.02); /* Chrome ladder — warm-neutral, header/sidebar/footer hue zone. chrome-1 is the chrome composite (rgba(3,7,18,0.03) over surface-1). chrome-2/3 step down ~4% L while staying inside that same neutral paper family (NOT the cream surface-2/3 ladder). Used by tables, inline code chips, expandable param boxes, and any other content- column "chrome" surface that should read as the same material as the header/sidebar/footer rather than a cream layer floating on top of the page. AAA verified: text-strong ≥14:1 and text-muted ≥8:1 on every step. */ --chrome-1: #f3f2f0; --chrome-2: #ebe9e5; --chrome-3: #e3e0db; /* `--border-subtle` previously sat at #e5e7eb (~1.25:1 against white), failing WCAG 2.2 AA 3:1 for non-text UI components. Used site-wide on tabs, tables, cards, sidebar, ticket rows, callouts, and form inputs — the whole site read as edge-less. After the surface ladder widening, #82766c (warm taupe) clears 3:1 on every step: 4.20:1 on surface-1, 3.69:1 on surface-2, 3.46:1 on surface-3 — AA across the ladder while staying inside the warm-paper hue family. */ --border-subtle: #82766c; /* Pushed from slate-950 #0f172a to a near-black #0a0b10 — increases body↔surface contrast by ~10% (16.97:1 → 18.7:1 on surface-1) which reads across the whole page as more weight/depth even without changing any surface or layout primitive. */ --text-strong: #0a0b10; /* #334155 (slate-700) clears WCAG AAA on all three warm-paper surfaces: 9.83:1 on surface-1, 8.64:1 on surface-2, 8.11:1 on surface-3. */ --text-muted: #334155; /* Design tokens */ --ui-border-width: 1px; --radius-control: 6px; --radius-chip: 6px; --radius-kbd: 5px; --radius-surface: 8px; --radius-lg: 8px; --radius-pill: 99px; /* Motion scale */ --motion-fast: 120ms; --motion-base: 180ms; --motion-slow: 280ms; /* Elevation scale (light). Dark variants live in the .dark block. */ --shadow-sm: 0 1px 0 rgba(15, 23, 42, 0.04); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); --shadow-overlay: 0 4px 16px rgba(15, 23, 42, 0.16); --dark-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.32); --tab-border: var(--border-subtle); --tab-bg: var(--surface-1); --tab-active-bg: var(--surface-2); --tab-active-text: var(--text-strong); --tab-text: var(--text-muted); /* Table fills routed through the chrome ladder so the head, alt rows, and hover all live in the same neutral-paper hue zone as the header/sidebar/footer — instead of jumping into the warmer cream surface-2/3 family. Head sits one step deeper than alt so it still reads as distinct, and hover lands one step deeper again so the affordance pops without going cream-yellow. */ --table-border: var(--border-subtle); --table-head-bg: var(--chrome-2); --table-row-alt: var(--chrome-1); --table-row-hover: var(--chrome-3); } :root.dark, html.dark, body.dark, html[data-theme="dark"], body[data-theme="dark"] { /* Mintlify primary color override for dark mode (RGB space notation). Aligned with --accent so Mintlify's built-in link/button affordances inherit the same AAA-safe red as our editorial primitives. Previous values (#d4625f / #e38b88 / #d05c59) failed AAA (3.6:1 – 6.3:1). Contrasts on #18171a / #1f1d22 / #27242b: --primary #f29a9a — 8.6 / 7.9 / 7.2 (AAA across all surfaces) --primary-light #f7b3b3 — 10.0 / 9.1 / 8.3 (AAA) --primary-dark #ee8e8e — 7.1 / 6.5 / 6.0 (AAA on surf-1; AA on 2/3 — acceptable for the "pressed" state) */ --primary: 242 154 154; --primary-light: 247 179 179; --primary-dark: 238 142 142; /* Accent - warm salmon for dark mode. WCAG AAA on all surface tiers: --accent #f29a9a: 8.39:1 (surf-1) / 7.85:1 (surf-2) / 7.18:1 (surf-3) --accent-strong #f7b3b3: 10.0:1 / 9.1:1 / 8.3:1. The brighter strong value lifts text-on-accent-soft to AAA — --accent over --accent-soft composite sits at ~6.2:1, --accent-strong clears 7:1. Equals --primary-light by design (same brightest-salmon role). */ --accent: #f29a9a; --accent-strong: #f7b3b3; /* Soft bg overlay updated from rgba(224,96,96,...) to the AAA-safe base so subtle fills stay tonally consistent with the new --accent. */ --accent-soft: rgba(242, 154, 154, 0.16); /* Success colors brightened for dark-mode contrast. WCAG AA on #18171a bg: #4ade80 → 9.78:1. */ --success: #4ade80; --success-strong: #86efac; --success-soft: rgba(74, 222, 128, 0.16); --primary-bg-color-brighter-light: var(--accent-soft); --primary-bg-color-light: var(--accent); /* Surfaces - neutral-warm darks */ --surface-1: #18171a; --surface-2: #1f1d22; --surface-3: #27242b; /* Diagram fills — white tint on dark so boxes keep presence (see :root). */ --diagram-node: rgba(255, 255, 255, 0.07); --diagram-surface: rgba(255, 255, 255, 0.025); /* Dark-mode chrome ladder aliases the warm-charcoal surfaces, which already sit in the header/sidebar/footer hue zone. Light mode needed a separate ladder because surface-2/3 there leans cream; in dark mode the surface stack IS the chrome family. */ --chrome-1: var(--surface-2); --chrome-2: var(--surface-3); --chrome-3: #2f2c33; /* Borders — previous #302d35 sat at ~1.3:1 against #18171a (failing WCAG 3:1 for non-text UI). #8a868e gets us ~3.25:1, matching the landing page's --fx-border value for visual consistency. */ --border-subtle: #8a868e; /* Same primary button tokens in dark mode — the deep red works in both contexts because the surrounding bg differs but white text always gets 9.7:1. Don't redefine (inherit from :root). */ /* Text */ --text-strong: #eeecea; --text-muted: #b5b0b8; /* Elevation scale (dark) */ --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.32); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.48); --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.40); /* Tabs */ --tab-background: var(--surface-2); --tab-border: var(--border-subtle); --tab-bg: var(--surface-1); --tab-active-bg: var(--surface-3); --tab-active-text: var(--text-strong); --tab-text: var(--text-muted); /* Tables - visible row alternation */ --table-border: var(--border-subtle); --table-head-bg: var(--chrome-2); --table-row-alt: var(--chrome-1); --table-row-hover: var(--chrome-3); } /* ── Apply page-bg token to Mintlify layout elements ── Mintlify's default body bg is pure white, which fights our warm-paper surface-1 (#fbf9f7) — without these rules, the cream only shows inside .fx-landing's max-width container, leaving white gutters on every doc page. Setting body + main + html to surface-1 in both modes makes the warm-paper material continuous across the entire site. */ body, main, :root { background-color: var(--surface-1); color: var(--text-strong); } .dark body, .dark main, :root.dark { background-color: var(--surface-1); color: var(--text-strong); } /* Sidebar mirrors the header/footer chrome treatment: same 3% translucent overlay (black in light, white in dark) over the body bg. Header, sidebar, and footer all read as one "chrome" surface family, slightly distinct from the main content area without leaning on shadows or borders. */ #sidebar-content { background-color: rgba(3, 7, 18, 0.03); } .dark #sidebar-content { background-color: rgba(255, 255, 255, 0.03); } /* Topnav bg — Mintlify's "palm" theme paints the topbar via an absolute overlay sibling of #navbar:

, so the matching selectors target both the