/* ========================================================= Delegee Shield — Colors & Type foundations Source of truth for CSS custom properties. Import once; use vars throughout. ========================================================= */ /* ----------------------------------------------------------- Typography — three faces (self-hosted, FU-152). ----------------------------------------------------------- */ /* Self-hosted under /static/fonts — FU-152. These faces were previously pulled via Google-Fonts `@import`, which CSP `style-src 'self'` BLOCKS, so they silently fell back to the system stack (3 console errors per page). Now vendored as woff2 and permitted by `default-src 'self'`; zero third-party font requests. Scope = latin + latin-ext only (English = latin; Croatian č ć đ š ž = latin-ext). All three families are variable — one file per subset spans every weight. Provenance + regeneration: server/static/fonts/README.md. Three faces: • Inter — primary UI face (~80%): headings, body, prose, chrome, buttons, labels. • Cascadia Code — mono (~20%): eyebrow labels, meta, IDs, paths, status chips; every mono glyph signals "machine output, not marketing." • Source Serif 4 — editorial serif scoped to the anonymised DOCUMENT surface (review doc body + rail pseudonyms + popover original) via --font-doc-serif, never the chrome; keeps Croatian diacritics crisp. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/static/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/source-serif-4-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/source-serif-4-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/static/fonts/source-serif-4-latin-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('/static/fonts/source-serif-4-latin-ext-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cascadia Code'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/cascadia-code-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cascadia Code'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/cascadia-code-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* UA-rendered chrome (scrollbars, form controls, spinners) follows the APP's theme, not the OS preference. base.html used to advertise "light dark" via , which made a dark-mode OS paint dark scrollbars onto our light paper surfaces. data-theme owns this now. */ color-scheme: light; /* -------- Brand palette -------- */ --navy-900: #08142E; /* deepest surface, near-black navy */ --navy-800: #0C1C3F; /* BRAND NAVY — primary brand color */ --navy-750: #102145; /* half-step: dark muted surfaces (refresh Δ6) */ --navy-700: #13294F; /* raised surface on dark */ --navy-600: #1E3966; /* hover on navy surfaces */ --navy-500: #2F4E82; /* borders on dark */ --navy-400: #5A77A8; /* de-emphasised text on navy */ --navy-300: #8FA3C4; --navy-200: #C3CEDE; --navy-100: #E4E9F1; --navy-050: #F4F6FA; --gold-700: #A8892B; --gold-600: #C4A133; --gold-500: #DCB73D; /* BRAND GOLD — accent */ --gold-400: #E4C664; --gold-300: #ECD58A; --gold-200: #F3E3B2; --gold-100: #FAF1D7; /* -------- Brand navy panel -------- The deep-navy field shared by the sign-in split panel and the authenticated navigation rail, so the two read as ONE continuous surface across the auth boundary. Deliberately its own three-stop ramp rather than steps of the --navy-* scale: that scale is tuned for text and borders, this one for a large lit field. auth.css:362-365 still carries these as literals — retire it onto --nav-bg later. */ --navy-panel-1: #1B2C56; /* ramp top — lightest */ --navy-panel-2: #142244; /* ramp middle */ --navy-panel-3: #0E1B36; /* ramp foot — deepest */ --navy-panel-ink: #EFEFEA; /* warm near-white ink these fields carry */ --paper: #FAF8F3; /* warm off-white, editorial feel */ --paper-2: #F3F0E7; /* second paper tone */ --ink: #0B1222; /* near-black for body text (warmer than pure) */ --ink-2: #3A4358; --ink-3: #6B7389; --hair: #E5E1D6; /* hair-line borders on paper */ --hair-2: #D8D2C2; --hair-3: #C2B9A2; /* one step down — hovered chrome on paper */ /* -------- Semantic: light mode -------- */ --bg: var(--paper); --bg-raised: #FFFFFF; --bg-sunken: var(--paper-2); --surface: #FFFFFF; --surface-muted: var(--navy-050); --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3); --fg-inverse: #FFFFFF; --border: var(--hair); --border-strong: var(--hair-2); --border-focus: var(--navy-800); /* Scrollbar thumb — warm hairline, same tone as strong borders on paper, so the chrome reads as part of the page. The canonical rule that consumes these lives in layout.css and applies to every scroll surface via the unscoped ::-webkit-scrollbar pseudo-elements. */ --scrollbar-thumb: var(--hair-2); --scrollbar-thumb-hover: var(--hair-3); --accent: var(--gold-500); --accent-strong: var(--gold-600); --accent-soft-bg: var(--gold-100); --accent-soft-fg: var(--gold-700); --brand: var(--navy-800); --brand-strong: var(--navy-900); --brand-soft-bg: var(--navy-050); --brand-soft-fg: var(--navy-800); /* Avatar (header account trigger) — quiet muted body + gold "notarial ring". Ring hue is intentionally the same in both modes; hover always brightens (ratified in the 2026-07-20 ui-polish round). */ --avatar-bg: var(--navy-100); --avatar-fg: var(--navy-800); --avatar-ring: var(--gold-500); --avatar-ring-hover: var(--gold-300); /* -------- Navigation rail (chrome-on-navy) -------- The authenticated continuation of the sign-in split: dark chrome that stays dark in BOTH themes, so most of this layer is mode-invariant by design. Only --nav-bg and --nav-spine-shadow re-tune under dark (the rail must still separate from a navy PAGE, and a navy-on-white cast makes no sense there). Rail component CSS reads ONLY these tokens — never a --navy-panel-* primitive, never a bare white alpha. */ --nav-bg: radial-gradient(120% 55% at 20% -6%, rgba(var(--gold-500-rgb), 0.13), transparent 58%), linear-gradient(168deg, var(--navy-panel-1) 0%, var(--navy-panel-2) 42%, var(--navy-panel-3) 100%); --nav-fg: var(--navy-panel-ink); /* primary rail ink */ --nav-fg-muted: var(--navy-200); /* item labels, icon chrome */ --nav-fg-dim: var(--navy-300); /* mono eyebrows, row meta */ --nav-item-hover: rgba(var(--white-rgb), 0.05); --nav-item-active-bg: rgba(var(--gold-500-rgb), 0.14); --nav-item-active-fg: var(--gold-300); --nav-accent-bar: var(--gold-500); /* leading bar on the active row */ --nav-border: rgba(var(--white-rgb), 0.08); /* foot/section hairlines */ --nav-border-strong: rgba(var(--white-rgb), 0.16); /* chip + inset edges */ --nav-kbd-bg: rgba(var(--white-rgb), 0.08); /* ⌘K chip fill */ --nav-tile-bg: var(--gold-500); /* "New idonymisation" icon tile */ --nav-tile-bg-hover: var(--gold-400); --nav-tile-fg: var(--navy-800); /* The seam where the white work surface meets the rail — an inset cast on the MAIN pane, not a border on the rail. */ --nav-spine-shadow: inset 10px 0 18px -12px rgba(var(--navy-800-rgb), 0.22); /* -------- Status tones (muted; NOT traffic-light) -------- */ --status-pending-bg: #F0EAD8; --status-pending-fg: #7A5E14; --status-done-bg: #E4E9F1; --status-done-fg: #13294F; --status-error-bg: #F5E4DF; --status-error-fg: #7A2A18; --status-info-bg: #E2EAF0; --status-info-fg: #1E3A5A; --status-ok-bg: #E4ECDC; /* flash success — earth-green family */ --status-ok-fg: #2E4A1F; /* Flash/banner borders — one per status tone */ --status-info-border: var(--navy-200); --status-ok-border: #C9D8B7; --status-pending-border: #E0D5A8; --status-error-border: #E8CFC7; /* -------- Danger (destructive actions — bolder than status-error) -------- */ /* Uses terracotta-red matching .user-menu-item--danger convention. */ --danger: #B73E3E; /* border accents, button fills */ --danger-muted: var(--status-error-fg); /* text on light bg */ --danger-soft-bg: var(--status-error-bg); /* subtle tinted bg */ /* -------- Success tone (confirmation banners) -------- */ --success: #2A7D32; /* border accent, text */ --success-soft-bg: #E6F4E7; /* tinted background */ /* -------- Entity families (4 colors, §8 of handoff) -------- */ --ent-people-bg: #F7E8DA; /* terracotta tint */ --ent-people-fg: #7A3E16; --ent-people-mark: #B45A28; --ent-org-bg: #E1E7EE; /* slate/steel */ --ent-org-fg: #263B59; --ent-org-mark: #3E577A; --ent-location-bg: #E4ECDC; /* earth green */ --ent-location-fg: #2E4A1F; --ent-location-mark: #4A6B35; --ent-id-bg: #F4E7BE; /* muted gold / amber — structured IDs */ --ent-id-fg: #6B5010; --ent-id-mark: #A8892B; --ent-generic-bg: #ECEAE4; --ent-generic-fg: #4A4A45; --ent-generic-mark: #6F6F68; /* -------- Type families -------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* --font-serif retained as an alias of --font-sans so existing consumers (privacy footer, legal prose) don't break. Intentionally NOT a serif — the system is Inter + Cascadia only. */ --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'Cascadia Code', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* Real editorial serif — the ONLY genuine serif in the system, scoped to the anonymised legal document surface (doc body, rail pseudonym, popover original). Everything else stays sans/mono. */ --font-doc-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* -------- Type scale (modular ratio ≈ 1.200) -------- */ --fs-micro: 11px; /* type tags, confidence */ --fs-xs: 12px; /* meta, chrome */ --fs-sm: 13px; /* secondary */ --fs-body: 15px; /* body */ --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 38px; --fs-5xl: 48px; --fs-display:64px; --lh-tight: 1.15; --lh-snug: 1.28; --lh-body: 1.55; --lh-prose: 1.65; --lh-relaxed: 1.5; /* was only referenced via fallback; defined to match */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.14em; /* -------- Spacing (4px base) -------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-11: 80px; --sp-12: 96px; /* -------- Statics — mode-invariant by definition (never themed) -------- */ --white: #FFFFFF; --black: #000000; /* -------- Channel triplets — for alpha tints: rgba(var(--ink-rgb), .06). Keep in sync with the hex of the token they mirror. -------- */ --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; --ink-rgb: 11, 18, 34; /* --ink */ --navy-900-rgb: 8, 20, 46; /* --navy-900 */ --navy-800-rgb: 12, 28, 63; /* --navy-800 */ --gold-500-rgb: 220, 183, 61; /* --gold-500 */ --danger-rgb: 183, 62, 62; /* --danger (light-mode hex) */ --ent-location-mark-rgb: 74, 107, 53; /* --ent-location-mark */ --ent-id-mark-rgb: 168, 137, 43; /* --ent-id-mark */ /* -------- Border widths -------- */ --bw-hair: 1px; /* default borders, dividers */ --bw-2: 2px; /* emphasis borders, selected states */ --bw-3: 3px; /* accent bars, focus underlines */ /* -------- Stacking (z-index) — purpose-named tiers. New code uses these; never a bare integer. Existing bare values migrate opportunistically (26 distinct ad-hoc values as of 2026-07-11; tiers sit at/above each stratum they replace). -------- */ --z-raised: 2; /* lifted-in-flow content (cards, marks) */ --z-sticky: 40; /* sticky rails, action bars, page chrome */ --z-header: 60; /* app header */ --z-menu: 200; /* dropdowns, popovers, kebab/user menus */ --z-overlay: 400; /* drawers, scrims below modal */ --z-modal: 1000; /* modal backdrop + panel */ --z-toast: 2000; /* toasts/flash above modals */ --z-max: 9999; /* bug widget & last-resort overlays */ /* -------- Radii — restrained; 2/4/6/10, no pill except badges -------- */ --r-sm: 2px; --r-md: 4px; --r-lg: 8px; --r-xl: 12px; --r-pill: 999px; --r-full: 999px; /* alias of --r-pill; was only referenced via fallback */ /* -------- Shadows — soft, editorial, never "SaaS puffy" -------- */ /* Elevation = printed hairline + tight key + negative-spread ambient (refresh Δ2 — the key layer carries definition; ambient never puffs). */ --sh-hair: 0 0 0 1px rgba(12,28,63,0.08); --sh-1: 0 1px 0 rgba(12,28,63,0.04), 0 1px 2px rgba(12,28,63,0.06); --sh-2: 0 1px 0 rgba(12,28,63,0.04), 0 1px 2px rgba(12,28,63,0.10), 0 4px 12px -2px rgba(12,28,63,0.08); --sh-3: 0 2px 0 rgba(12,28,63,0.03), 0 2px 4px rgba(12,28,63,0.08), 0 16px 32px -8px rgba(12,28,63,0.12); --sh-inset: inset 0 0 0 1px rgba(12,28,63,0.10); --sh-focus: 0 0 0 4px rgba(220,183,61,0.35); /* -------- Scrim — shared modal/drawer backdrop (matches the review .modal__backdrop value; single dark overlay works on both themes) -------- */ --scrim: rgba(11,18,34,0.55); --scrim-heavy: rgba(var(--navy-900-rgb), 0.62); /* blocking modals (reprompt) */ /* -------- Motion — calm, no bounce -------- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-in: cubic-bezier(0.5, 0, 0.75, 0); --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 360ms; /* -------- Layout rails -------- */ --rail-narrow: 640px; --rail-default: 960px; --rail-wide: 1200px; --rail-max: 1440px; /* Reading measure — the comfortable centered width for the review document column (~72ch of Source Serif 4 at 16px). Applied at every width >=1101 so a 13" MacBook Air gets a settled, centered column instead of full-bleed prose; inert while the panel is narrower. */ --measure: 820px; /* Global app-header height — single source of truth. Every header-relative sticky offset (sidebar top, review action bar) reads this so the chrome stays aligned across all pages. */ --header-h: 60px; /* Review right-rail width — the shell-level third grid column holding the action bar + entity list on /sessions (review v3). 384 -> 320 (UX 2026-07-07): the rail's content is ~288px wide, so 384 was slack that starved the document on 13" screens; 320 hands 64px straight back to the reading column. Still user-resizable. */ --rail-w: 320px; } /* ========================================================= Dark mode — requested by §9 (lawyers read for hours). Invert surfaces; nudge entity tints to work on navy. ========================================================= */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--navy-900); --bg-raised: var(--navy-800); --bg-sunken: #050B1B; --surface: var(--navy-800); --surface-muted: var(--navy-750); --fg: #EFEFEA; --fg-2: #B7BCC8; --fg-3: #7C8597; --fg-inverse: var(--navy-900); --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --border-focus: var(--gold-500); --scrollbar-thumb: rgba(255,255,255,0.16); /* = --border-strong dark */ --scrollbar-thumb-hover: rgba(255,255,255,0.28); --accent-soft-bg: rgba(220,183,61,0.12); --accent-soft-fg: var(--gold-400); --brand-soft-bg: rgba(143,163,196,0.10); --brand-soft-fg: #B7C4D8; --avatar-bg: var(--navy-700); --avatar-fg: var(--navy-200); /* Navigation rail — dark chrome in BOTH themes, so only the field and the spine cast re-tune here (the rest of the --nav-* layer is mode-invariant by design). The rail still has to read as a distinct panel when the PAGE is navy too, so the ramp starts at --navy-800 and sinks BELOW --bg at its foot, and the gold wash halves so it doesn't glow against the darker surround. The spine cast goes black: a navy shadow is invisible on a navy work surface. */ --nav-bg: radial-gradient(120% 55% at 20% -6%, rgba(var(--gold-500-rgb), 0.07), transparent 58%), linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 45%, var(--bg-sunken) 100%); --nav-spine-shadow: inset 10px 0 18px -12px rgba(var(--black-rgb), 0.40); --status-pending-bg: rgba(220,183,61,0.14); --status-pending-fg: var(--gold-300); --status-done-bg: rgba(143,163,196,0.14); --status-done-fg: #C7D1E1; --status-error-bg: rgba(180,90,40,0.18); --status-error-fg: #E8B09A; --status-info-bg: rgba(90,119,168,0.18); --status-info-fg: #BFD1E6; --status-ok-bg: rgba(74,107,53,0.26); /* mirrors --ent-location dark */ --status-ok-fg: #C4D8AD; --status-info-border: rgba(255,255,255,0.16); /* = --border-strong dark */ --status-ok-border: rgba(255,255,255,0.16); --status-pending-border: rgba(255,255,255,0.16); --status-error-border: rgba(255,255,255,0.16); --danger: #D46060; /* brighter danger red on dark bg */ --danger-muted: var(--status-error-fg); --danger-soft-bg: var(--status-error-bg); --success: #4CAF50; --success-soft-bg: rgba(46,125,50,0.14); --ent-people-bg: rgba(180,90,40,0.20); --ent-people-fg: #E8B89A; --ent-org-bg: rgba(90,119,168,0.22); --ent-org-fg: #C7D5EA; --ent-location-bg: rgba(74,107,53,0.26); --ent-location-fg: #C4D8AD; --ent-id-bg: rgba(220,183,61,0.18); --ent-id-fg: var(--gold-300); --ent-generic-bg: rgba(255,255,255,0.08); --ent-generic-fg: #B7BCC8; /* Dark elevation = faint light edge ring + tight key + deep ambient (refresh Δ3 — ring matches the white-alpha border system; no black lip). */ --sh-hair: 0 0 0 1px rgba(255,255,255,0.06); --sh-1: 0 1px 0 rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.35); --sh-2: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 2px rgba(0,0,0,0.40), 0 6px 16px -4px rgba(0,0,0,0.50); --sh-3: 0 0 0 1px rgba(255,255,255,0.07), 0 2px 4px rgba(0,0,0,0.40), 0 16px 36px -8px rgba(0,0,0,0.55); --sh-inset: inset 0 0 0 1px rgba(255,255,255,0.08); --sh-focus: 0 0 0 4px rgba(220,183,61,0.45); } /* ========================================================= Base element styles — applied when the system is imported. Consumers can opt into these by adding class="ds" to or simply by importing this file into their root stylesheet. ========================================================= */ html { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* -------- Semantic text roles -------- */ .ds-eyebrow { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); } h1, .ds-h1 { font-family: var(--font-sans); font-size: var(--fs-4xl); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); color: var(--fg); margin: 0; } h2, .ds-h2 { font-family: var(--font-sans); font-size: var(--fs-2xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 0; } h3, .ds-h3 { font-family: var(--font-sans); font-size: var(--fs-xl); line-height: var(--lh-snug); font-weight: var(--fw-semibold); margin: 0; } h4, .ds-h4 { font-family: var(--font-sans); font-size: var(--fs-lg); line-height: var(--lh-snug); font-weight: var(--fw-semibold); margin: 0; } p, .ds-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg); margin: 0; } .ds-prose { font-family: var(--font-serif); font-size: var(--fs-lg); line-height: var(--lh-prose); color: var(--fg); } .ds-meta { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--fg-3); } code, .ds-code { font-family: var(--font-mono); font-size: 0.92em; color: var(--fg); background: var(--surface-muted); padding: 1px 6px; border-radius: var(--r-sm); } .ds-display { font-family: var(--font-sans); font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-semibold); letter-spacing: -0.03em; }