/* Ordainer design tokens: brand Option A (light + teal), chosen Oct 2, 2026. Taken from homepage-mockup.html (source of truth, incl. the 5:24 PM Oct 3 hero), dashboard-mockup.html and docs-mockup.html. Names match the mockups. The semantic aliases (--color-*) point at them; use the aliases in new code. Text contrast is checked to WCAG AA on --paper and --surface (see brand-basics.md). */ :root { /* ---- Surfaces ---- */ --paper: #FAF9F6; /* page background */ --surface: #FFFFFF; /* cards, tables, inputs, sidebar panels */ --subtle: #F1EFE9; /* inline code bg, hover rows, quiet fills */ /* ---- Borders ---- */ --line: #E3E0D8; /* default 1px borders, dividers */ --line-strong: #8A8F9C; /* input borders, dashed "shadow" outline, non-text UI (3:1) */ /* ---- Text ---- */ --ink: #0E1525; /* body text, headings, primary dark fill */ --muted: #4B5468; /* secondary text, captions, table headers (AA on paper and surface) */ /* ---- Allow / brand (teal) ---- */ --accent: #0B6B5C; /* primary button, links, allow, focus ring */ --accent-hover: #08564A; /* hover/pressed; text on --accent-soft */ --accent-soft: #E2F0EB; /* allow pill and info callout background */ --accent-line: #C7E2D8; /* allow pill and info callout border */ /* ---- Deny (red) ---- */ --deny: #B42318; /* deny text/icons, "would deny" dashed outline, past-due bar */ --deny-ink: #9A1C13; /* text on --deny-soft */ --deny-soft: #FDECEA; /* deny pill and callout background */ --deny-line: #F4C7C1; /* deny pill and callout border */ /* ---- Warning (amber): billing warnings, base URL not live, test-limit notes ---- */ --warn-soft: #FDF3E2; --warn-ink: #7A4A06; /* warning text */ --warn-strong: #5C3700; /* warning callout title */ --warn-line: #E9C88E; /* The docs mockup used #FBF1DC / #8A5A00 for its callout; use these instead. */ /* ---- Terminal / code blocks / dark band ---- */ --term: #0F1623; /* code block background, dark closing band */ --term-2: #161F2E; /* code block header strip */ --term-line: #263247; /* borders inside dark areas */ --term-text: #D7DEE8; --term-muted: #8D9AAE; /* comments, labels in code */ --term-allow: #5EDBA5; /* "allow" in terminal output */ --term-deny: #FF8173; /* "deny" in terminal output */ --term-accent: #7FE0C2; /* keywords, active tab, focus ring on dark */ --term-str: #F2D08A; /* strings in code (docs) */ --band-muted: #A9B3C4; /* secondary text on the dark band */ /* ---- Semantic aliases (use these in new code) ---- */ --color-bg: var(--paper); --color-surface: var(--surface); --color-subtle: var(--subtle); --color-border: var(--line); --color-border-strong: var(--line-strong); --color-text: var(--ink); --color-text-muted: var(--muted); --color-link: var(--accent); --color-focus: var(--accent); /* on dark: var(--term-accent) */ --color-allow: var(--accent); --color-allow-text: var(--accent-hover); --color-allow-bg: var(--accent-soft); --color-allow-border: var(--accent-line); --color-deny: var(--deny); --color-deny-text: var(--deny-ink); --color-deny-bg: var(--deny-soft); --color-deny-border: var(--deny-line); --color-would-deny: var(--deny); /* shadow-mode deny: white bg, 1px DASHED --deny border, --deny text */ --color-shadow: var(--muted); /* "shadow" mode pill: white bg, 1px DASHED --line-strong, --muted text */ --color-enforce: var(--ink); /* "enforce" mode pill: --ink bg, white text */ --color-warn-text: var(--warn-ink); --color-warn-bg: var(--warn-soft); --color-warn-border: var(--warn-line); /* ---- Fonts (load fonts/fonts.css first) ---- */ --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Code: turn off ligatures so != and == show as typed: font-variant-ligatures:none */ /* ---- Type scale (rem on a 16px root) ---- */ --fs-display: min(4.25rem, 8.6cqi); /* homepage hero h1: two nowrap lines, on a .hero-copy container (container-type:inline-size) */ --fs-display-fallback: clamp(2rem, 1.4rem + 4.2vw, 4.25rem); /* where container units aren't supported */ --fs-h1: clamp(2rem, 1.2rem + 3vw, 3.25rem); /* marketing section h2 / page titles */ --fs-h2: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem); --fs-h1-app: 1.625rem; /* dashboard page title */ --fs-h1-docs: 2.5rem; /* docs h1 (31px on mobile) */ --fs-h2-docs: 1.5625rem; /* docs h2 (25px) */ --fs-h3: 1.25rem; --fs-lede: clamp(1.125rem, 1rem + .4vw, 1.3125rem); --fs-lg: 1.125rem; --fs-body: 1rem; --fs-sm: .9375rem; --fs-xs: .875rem; --fs-xxs: .8125rem; --fs-micro: .75rem; /* pills, eyebrows (uppercase, .06em tracking) */ --fs-code: .875rem; /* code blocks; inline code .86em */ --lh-body: 1.6; /* docs body 1.65 */ --lh-heading: 1.15; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Headings use 600 to 650 (variable font), with letter-spacing -0.01em to -0.02em and text-wrap:balance */ /* ---- Spacing (4px base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-24: 96px; --wrap: 1160px; /* marketing content width */ --docs-content: 760px; /* docs article column */ --side: 248px; /* dashboard sidebar (docs sidebar 272px) */ --header-h: 60px; /* docs sticky header */ /* ---- Radii ---- */ --r-sm: 6px; /* inline code, small buttons, nav items */ --r: 10px; /* cards, code blocks, tables, callouts (8px) */ --r-lg: 16px; /* large marketing panels (dashboard uses 14px) */ --r-pill: 999px; /* ---- Shadows ---- */ --shadow: 0 1px 2px rgba(14,21,37,.04), 0 8px 24px rgba(14,21,37,.06); /* cards (dashboard: 0 6px 18px .05) */ --shadow-term: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -12px rgba(14,21,37,.35); /* hero terminal */ --shadow-drawer: 0 10px 30px rgba(14,21,37,.15); /* mobile docs drawer */ /* ---- Focus ---- */ --focus-ring: 3px solid var(--accent); /* :focus-visible { outline: var(--focus-ring); outline-offset: 3px } (docs uses 2px/2px) */ /* ---- Breakpoints (reference only: custom properties don't work inside @media) ---- max-width: 1180px docs: hide right-hand table of contents 1100px dashboard: compact layout 1024px homepage: hero stacks 900px docs: sidebar becomes a drawer 860px dashboard: sidebar becomes a top bar 760px homepage: mobile nav and layout 600px docs: mobile type and code 420px / 340px homepage: small phones */ --bp-xl: 1180px; --bp-lg: 1024px; --bp-md: 860px; --bp-sm: 760px; --bp-xs: 420px; } /* ---- Starlight mapping (ordainer.dev, if Starlight is used; Mintlify takes the same hex values in docs.json) ---- Starlight's light theme flips the grey scale: --sl-color-white is the darkest TEXT and --sl-color-black is the BACKGROUND. :root[data-theme='light'] { --sl-color-accent-low: #E2F0EB; (--accent-soft) --sl-color-accent: #0B6B5C; (--accent) --sl-color-accent-high: #08564A; (--accent-hover) --sl-color-white: #0E1525; (--ink) --sl-color-gray-1: #1C2638; --sl-color-gray-2: #2B3648; --sl-color-gray-3: #4B5468; (--muted) --sl-color-gray-4: #8A8F9C; (--line-strong) --sl-color-gray-5: #E3E0D8; (--line) --sl-color-gray-6: #F1EFE9; (--subtle) --sl-color-gray-7: #FAF9F6; (--paper) --sl-color-black: #FFFFFF; (--surface) --sl-font: var(--sans); --sl-font-mono: var(--mono); } Code blocks (Expressive Code): use a dark theme with background #0F1623 (--term) on both site themes. */