/* ======================================================================== tokens.css -- ScribeHold design tokens Foundation layer for the modular CSS bundle. All downstream layers (base, layout, components, pages) reference these tokens via var(...). See docs/plans/web-site-polish-and-feature-trim/architecture.md. Bundle order: tokens -> base -> layout -> components/* -> pages/* ------------------------------------------------------------------------ Breakpoints (NOT custom properties -- browsers do not support var(...) inside @media queries). Repeat these literal values in every CSS file that authors @media (min-width: ...) rules. sm: 480px md: 768px lg: 1024px xl: 1280px Authoring style: mobile-first. Base styles target the smallest viewport; use @media (min-width: ) to layer on larger viewports. Do NOT author @media (max-width: ...) queries in new CSS. ======================================================================== */ :root { /* -------------------------------------------------------------------- Color -- Backgrounds (warm/archival register) Source: docs/business/07-brand-and-identity.md -------------------------------------------------------------------- */ --color-bg-cream: #fbfaf6; /* page background -- current site bg */ --color-bg-warm-cream: #f4ecdd; /* marketing-surface, seal tile bg */ --color-bg-paper-cream: #f5f1e8; /* ledger-spine wordmark color */ --color-bg-manila: #f4f1e8; /* table header, soft panel surface */ --color-bg-parchment: #efe9d8; /* deeper warm panel */ --color-bg-card: #ffffff; /* card / elevated surface */ --color-bg: var(--color-bg-cream); /* canonical "page bg" alias (AC) */ --color-surface: var(--color-bg-card); /* -------------------------------------------------------------------- Color -- Foregrounds (inks) -------------------------------------------------------------------- */ --color-ink: #1f2024; /* body ink -- current site ink */ --color-ink-navy: #1b2a4e; /* foreground ledger-spine accent */ --color-ink-oxblood: #8b2332; /* museum-label red, stamped-seal */ --color-ink-forest: #0e1116; /* bracket-mark primary near-black */ --color-ink-charcoal: #1f2328; /* wordmark primary letters */ --color-ink-slate-tile: #1f2937; /* app-icon tile / dark mode taskbar */ --color-muted: #5a5d66; /* secondary text -- current site muted */ --color-bracket-slate: #5b6470; /* bracket secondary stroke */ /* -------------------------------------------------------------------- Color -- Accents -------------------------------------------------------------------- */ --color-accent: #9b6822; /* citation amber -- canonical accent (WCAG AA: 4.57:1 cream-text on accent, 4.57:1 graphic on cream) */ --color-accent-ink: #6a4514; /* darker accent for link/hover ink */ --color-accent-pin: #d97706; /* pin amber (A/B mark variant) */ --color-accent-gold: #c9a961; /* aged-brass gold (ledger-spine) */ /* -------------------------------------------------------------------- Color -- Lines, rules, focus -------------------------------------------------------------------- */ --color-border: #e6e2d6; /* rule lines -- current site rule */ --color-border-strong: #9c8f6f; /* stronger border for emphasis (WCAG 1.4.11: 3.06:1 on cream, used as .btn-secondary outline) */ --color-focus-ring: var(--color-accent); /* -------------------------------------------------------------------- Color -- CTA action (navy-derived; authority register for legal-evidence buyers) cream-on-navy contrast: ~10:1 (AAA) -------------------------------------------------------------------- */ --color-cta: var(--color-ink-navy); /* #1b2a4e -- primary CTA fill */ --color-cta-hover: #2a3d63; /* slightly lighter navy for hover state */ /* -------------------------------------------------------------------- Color -- Interactive state -------------------------------------------------------------------- */ --color-link: var(--color-accent-ink); --color-link-hover: var(--color-accent); --color-link-visited: var(--color-accent-ink); /* -------------------------------------------------------------------- Color -- Subtle accent washes (used by comparison grid highlights) -------------------------------------------------------------------- */ --color-accent-wash-04: rgba(155, 104, 34, 0.04); --color-accent-wash-06: rgba(155, 104, 34, 0.06); --color-accent-wash-10: rgba(155, 104, 34, 0.10); --color-accent-wash-15: rgba(155, 104, 34, 0.15); /* -------------------------------------------------------------------- Typography -- font stacks -------------------------------------------------------------------- */ --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-family-serif: "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", Times, serif; --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-family-base: var(--font-family-sans); /* -------------------------------------------------------------------- Typography -- size scale (mobile baseline; pages may scale up via larger min-width breakpoints in component CSS) -------------------------------------------------------------------- */ --font-size-xs: 0.78rem; /* ~12.5px @ 16px root */ --font-size-sm: 0.875rem; /* ~14px */ --font-size-base: 1rem; /* 16px */ --font-size-md: 1.0625rem; /* ~17px -- current body size */ --font-size-lg: 1.15rem; /* ~18.4px -- lede */ --font-size-xl: 1.25rem; /* ~20px -- h3 */ --font-size-2xl: 1.5rem; /* ~24px */ --font-size-3xl: 1.875rem; /* ~30px -- h2 mobile */ --font-size-4xl: 2.25rem; /* ~36px -- h2 desktop */ --font-size-5xl: 2.75rem; /* ~44px -- h1 desktop */ /* -------------------------------------------------------------------- Typography -- weight + line-height + tracking -------------------------------------------------------------------- */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.15; /* headings */ --line-height-snug: 1.3; --line-height-normal: 1.55; /* body -- current site value */ --line-height-loose: 1.7; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.02em; /* -------------------------------------------------------------------- Spacing -- 4px base grid -------------------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* -------------------------------------------------------------------- Border radius -------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; /* current site --radius */ --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* pills / circular avatars */ /* -------------------------------------------------------------------- Shadow -- warm-tinted (warm/archival feel, not pure black) -------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(31, 32, 36, 0.06); --shadow-md: 0 2px 6px rgba(31, 32, 36, 0.08), 0 1px 2px rgba(31, 32, 36, 0.05); --shadow-lg: 0 6px 16px rgba(31, 32, 36, 0.10), 0 2px 4px rgba(31, 32, 36, 0.06); --shadow-focus: 0 0 0 3px var(--color-accent-wash-15); /* -------------------------------------------------------------------- Layout -- container widths and z-index scale -------------------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 760px; --container-wide: 1440px; --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* -------------------------------------------------------------------- Motion -- durations and easings (respect prefers-reduced-motion in component CSS) -------------------------------------------------------------------- */ --duration-fast: 120ms; --duration-medium: 220ms; --duration-slow: 360ms; --easing-standard: cubic-bezier(0.2, 0, 0, 1); --easing-emphasis: cubic-bezier(0.3, 0, 0.1, 1); }