/* ============================================================================= Datomic Docs — Design Tokens (Meadow) ============================================================================= FOUNDATION PRIMITIVES ONLY. This file is the docs site's design vocabulary: the :root custom properties that the (forthcoming) component CSS and chrome reference by name. It deliberately does NOT style any element. ACCESSIBILITY ------------- Computed contrast ratios can go in comments. AA = 4.5:1 for normal text. Each color token below carries its own measured ratio against white / --surface — those per-token annotations ARE the validation record; keep them current whenever you change a color. ============================================================================= */ :root { /* --- Palette: Meadow --------------------------------------------------- Near-black prose; green owns INTERACTIVE states (links/buttons). --accent is DECORATIVE-ONLY on light backgrounds (1.84:1 as text on white — fails AA; use only as fills/borders/underlines, or as text on dark sections). */ --accent: #6AD48C; /* brand green — decorative on light; ~8.6:1 on --dark-bg */ --text: #1C2421; /* body + headings — 15.86:1 on white, 14.74:1 on --surface */ --link: #197A47; /* links/buttons — 5.36:1 on white, 4.98:1 on --surface (passes, tight) */ --link-hover: #0E4D2C; /* link hover — 9.92:1 on white */ --surface: #F5F7F5; /* cards, code blocks, alt-row backgrounds */ --border: #C8E8D4; /* green-tinted dividers and card borders */ --dark-bg: #1C2421; /* dark section background */ --white: #FFFFFF; /* --- Neutral grays — structural borders, code chrome, muted text ------- */ --gray-100: #F4F4F5; --gray-200: #E4E4E7; --gray-300: #D4D4D8; --gray-400: #A1A1AA; /* 2.6:1 on white — non-text/large only, not AA body */ --gray-500: #71717A; /* lighter muted text — 4.8:1 on white, AA */ --gray-600: #52525B; /* muted text — 7.0:1 on white */ --gray-700: #3F3F46; /* secondary text */ /* Search-match highlight. Amber, applied as a BACKGROUND, not a text color. Rationale: green owns interactive states (links/buttons), so tinting matched text green would collide with link styling and mislead. An amber background keeps the highlight semantically distinct and stays AA-legible paired with --text. */ --highlight-bg: #FCE89B; /* pair with color: var(--text) */ /* --- Font weight tokens ------------------------------------------------ */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; /* nav links, subtle emphasis */ --fw-semibold: 600; /* UI components: buttons, cards, nav labels */ --fw-bold: 700; /* strong headings */ /* --- Font families ----------------------------------------------------- --font-sans and --font-mono replace the old body and code fonts (Open Sans and Source Code Pro). Safe, direct swaps: each is a list of fonts already on the reader's device, so nothing is downloaded. --font-serif (Palatino) is defined here so it's ready if we want it, but it is not used anywhere yet. We haven't decided whether a serif font fits the headings on these dense technical pages. Until that's decided, don't apply --font-serif to h1–h4. */ --font-sans: 'Open Sans', 'Trebuchet MS', 'Liberation Sans', Roboto, 'DejaVu Sans', sans-serif; --font-mono: 'Source Code Pro', 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', monospace; --font-serif: Palatino, 'Palatino Linotype', 'Book Antiqua', 'Noto Serif', 'DejaVu Serif', serif; /* heading-font question unresolved — not yet applied */ /* --- Type scale -------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px — labels, metadata */ --text-xs-plus: 0.8125rem; /* 13px — compact metadata, citations */ --text-sm: 0.875rem; /* 14px — secondary text */ --text-sm-plus: 0.9375rem; /* 15px — dense body copy */ --text-base: 1rem; /* 16px — body */ --text-md: 1.0625rem; /* 17px — section intros */ --text-lg: 1.125rem; /* 18px — emphasized body, card titles */ /* By default (wide/desktop viewports), h1-h4 scale vaguely with a perfect fourth ratio, with exceptions at either end. */ --text-xl: 1.25rem; /* 20px — article h4 */ --text-2xl: 1.75rem; /* 28px — article h3 */ --text-3xl: 2.25rem; /* 36px — article h2 */ --text-4xl: 2.75rem; /* 44px — article h1 */ --text-5xl: 3.5rem; /* 56px — hero h1 (as yet unused DL_2026-06-16) */ --text-code: 0.9rem; /* 14.4px — monospace blocks */ /* --- Spacing scale ----------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* --- Docs layout/chrome tokens ----------------------------------------- Keep layout constants in token space so docs.css can own responsive gutters without relying on legacy application.css literals. */ --docs-content-max-width: 800px; --docs-gutter-inline-desktop: clamp(var(--space-6), 4vw, 3.236em); --docs-gutter-inline-mobile: clamp(var(--space-3), 4vw, var(--space-5)); /* The readable prose column, used as the basis for the wide-table breakout's legibility ceiling (see `.table-scroll` in docs.css). An APPROXIMATION of the real column: content max-width less the nominal desktop side padding (3.236em each side). docs.css owns the actual gutters as a clamp(), so this is not pixel-exact -- fine for a readability heuristic scaled by 1.5. Kept in em so it tracks text-zoom for accessibility. */ --docs-prose-measure: calc(var(--docs-content-max-width) - 2 * 3.236em); /* How many prose-measures wide a table may grow before it stops reading as one unit. Caps the table breakout's legibility ceiling. */ --docs-table-readability-multiplier: 1.4; /* --- Radii ------------------------------------------------------------- */ --radius-lg: 8px; /* --- Overlays ---------------------------------------------------------- */ /* Lightbox/modal backdrop scrim. Derived from --dark-bg at 85%. */ --docs-overlay-bg: rgba(28, 36, 33, 0.85); }