/*
* Bracer Design System — Tokens
* Pure black-and-white, editorial, type-driven.
*
* This file is a pure value sheet: every color, type, spacing, radius, and
* motion value the site uses lives here, and only here. Base element styles
* live in site.css (marketing pages) and doc.css (briefings).
*
* Webfonts are loaded per-page via + in each
* (not @import, which serializes the request chain).
*/
:root {
/* ============================================================
* Color
* One rule: pure black on pure white, with one amber accent
* used sparingly (the bee).
* ============================================================ */
--ink: #0A0A0A; /* primary text, primary fg */
--ink-2: #3A3A38; /* secondary text */
--ink-3: #76746E; /* tertiary text, eyebrows */
--paper: #FAFAF7; /* primary background, warm white */
--paper-pure: #FFFFFF; /* rare higher-key surface */
--paper-2: #F2F1EC; /* subtle alt surface */
--paper-veil: rgba(250, 250, 247, 0.78); /* translucent bars (nav, docbar) */
--rule: rgba(10, 10, 10, 0.12); /* all hairlines */
--rule-strong: rgba(10, 10, 10, 0.24); /* emphasized hairline */
--accent-amber: #C9A227; /* the bee, and only the bee */
/* Inverted (ink-on-paper inverted to paper-on-ink) */
--inv-ink: #FAFAF7;
--inv-ink-2: rgba(250, 250, 247, 0.72); /* secondary text on ink */
--inv-ink-3: rgba(250, 250, 247, 0.6); /* tertiary text on ink */
--inv-paper: #0A0A0A;
--inv-rule: rgba(250, 250, 247, 0.16);
--inv-rule-strong: rgba(250, 250, 247, 0.3);
/* ============================================================
* Typography
* Two faces in deliberate tension.
* ============================================================ */
--font-display: "Instrument Serif", "Newsreader", Georgia, serif;
--font-text: "Geist", -apple-system, "Helvetica Neue", Arial, sans-serif;
--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
/* Type scale — sizes in px, line-heights unitless.
* These are the values the components actually render; site.css and
* doc.css reference them and never restate them. */
--text-display-xl-size: 92px; --text-display-xl-lh: 1.00;
--text-display-l-size: 82px; --text-display-l-lh: 1.04;
--text-display-m-size: 64px; --text-display-m-lh: 1.08;
--text-display-s-size: 44px; --text-display-s-lh: 1.10;
--text-lead-size: 22px; --text-lead-lh: 1.5;
--text-eyebrow-size: 16.25px; --text-eyebrow-lh: 1.2;
--text-body-size: 17px; --text-body-lh: 1.55;
--text-small-size: 14px; --text-small-lh: 1.5;
--text-mono-size: 13px; --text-mono-lh: 1.4;
--text-caption-size: 12px; --text-caption-lh: 1.4;
--text-micro-size: 11px; --text-micro-lh: 1.0;
/* ============================================================
* Spacing — 8pt scale
* ============================================================ */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--s-11: 192px;
/* Containers */
--container-marketing: 1280px;
--container-doc: 1080px;
--container-prose: 720px;
/* Radii — almost always 0 */
--r-0: 0;
--r-1: 2px; /* buttons, calendar pills, vendor chips */
--r-full: 999px; /* the bee mark only */
/* Motion */
--ease-rule: cubic-bezier(0.2, 0.8, 0.2, 1);
--dur-hover: 120ms;
--dur-rule: 600ms;
--dur-count: 1200ms;
}
/* ============================================================
* Reduced motion — every transition and animation in the site
* references the duration tokens above, so zeroing the tokens
* disables motion globally.
* ============================================================ */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-hover: 0ms;
--dur-rule: 0ms;
--dur-count: 0ms;
}
}
/* ============================================================
* Print
* ============================================================ */
@media print {
:root { --paper: #ffffff; }
}