/* * ═══════════════════════════════════════════════════════════════════════ * type_system.css — Daralbeida unified TEXT-DISPLAY system * DAB-VIS-CSS-TYPE-001 · v1.0 · May 2026 * * PURPOSE * ─────── * ONE source of truth for how text looks across the platform. Text is * classified by ROLE (Display, Brand, Title, Body, Meta, Label, Micro); * a role looks identical on every page AND in every view (list / tiles / * rows). Views may change layout and truncation — never the font. * * THE REQUIREMENTS (agreed) * 1. Role-based, not place-based. * 2. A role = one family + one fixed px size + one weight + one * line-height, everywhere. * 3. No container-query / viewport font scaling (fixed sizes only). * 4. Change a role here once → it updates everywhere that loads this file. * * FONT STACK ("Editorial warmth") * Serif / headlines : Fraunces (warm modern serif, legible small) * Sans / body : Inter (best-in-class UI legibility) * Mono / labels : IBM Plex Mono (technical, refined) * Loaded via the in the page (Google Fonts). * * ROLLOUT STATUS * Currently linked ONLY by /darmaster/01/index.php (document browser) for * review. After sign-off, link it from /02/–/08/, the KBI dashboard and * the TXT viewer too (and retire their local font rules). * * NOTE: this file loads AFTER webpage_section_generic.css + theme_section_dark.css, * so its role rules win. It only sets font-family / size / weight / line-height — * never colour (the dark theme keeps its colours). * ═══════════════════════════════════════════════════════════════════════ */ /* ── ROLE TOKENS ← the whole type system in one block ───────────────── */ :root { /* 2026-06-25 (user) UNIFY: families + sizes now RIDE the platform tokens (__darmaster/css/base/tokens.css) so this file no longer competes. Titles use the title font (Bricolage), body/UI the sans (Inter), code the mono (Victor); every size rides the --ui-fs-* ladder so the --ui-scale knob reaches these surfaces. */ /* Families */ --type-serif: var(--font-title, 'Bricolage Grotesque', sans-serif); /* doc/card titles → title font */ --type-sans: var(--font-sans, 'Inter', sans-serif); --type-mono: var(--font-mono, 'Victor Mono', monospace); /* Scale → platform --ui-fs-* (scale-driven; weights/line-heights kept) */ --type-display-size: var(--ui-fs-display); --type-display-weight: 600; --type-display-lh: 1.15; --type-brand-size: var(--ui-fs-display); --type-brand-weight: 600; --type-brand-lh: 1.2; --type-title-size: var(--ui-fs-title); --type-title-weight: 600; --type-title-lh: 1.3; --type-body-size: var(--ui-fs-value); --type-body-weight: 400; --type-body-lh: 1.55; --type-meta-size: var(--ui-fs-label); --type-meta-weight: 400; --type-meta-lh: 1.4; --type-label-size: var(--ui-fs-label); --type-label-weight: 600; --type-label-lh: 1.3; --type-micro-size: var(--ui-fs-micro); --type-micro-weight: 500; --type-micro-lh: 1.3; } /* ═══════════════════════════════════════════════════════════════════════ DOCUMENT BROWSER MAPPING (/01/, later /08/) Maps each text element of the browser to a role. Same selectors the generic stylesheet uses — only the *values* change, and only on pages that load this file. ═══════════════════════════════════════════════════════════════════════ */ /* Base — body text is Sans */ body { font-family: var(--type-sans); } /* ── TITLE ── document/card headline — IDENTICAL in tiles AND list ────── */ .doc-card-title, .doc-views[data-view="list"] .doc-card-title { font-family: var(--type-serif); font-size: var(--type-title-size); /* fixed 16px — overrides the old cqi clamp (tiles) and 15px (list) */ font-weight: var(--type-title-weight); line-height: var(--type-title-lh); } /* ── BODY ── descriptions, search snippets, the list hover bubble ─────── */ .doc-card-purpose, .doc-card-snippet { font-family: var(--type-sans); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); } .doc-views[data-view="list"] .doc-card[data-purpose]:has(.doc-ico-info:hover)::after { font-family: var(--type-sans); font-size: var(--type-body-size); font-weight: var(--type-body-weight); line-height: var(--type-body-lh); } /* ── META ── date · size (card foot) ──────────────────────────────────── */ .doc-card-meta { font-family: var(--type-mono); font-size: var(--type-meta-size); } /* ── MICRO ── filename reference ──────────────────────────────────────── */ .doc-card-file { font-family: var(--type-mono); font-size: var(--type-micro-size); } /* ── LABEL ── group headings (entity / department) ────────────────────── */ .doc-section-label { font-family: var(--type-mono); font-size: var(--type-label-size); } .doc-subcat-label { font-family: var(--type-mono); font-size: var(--type-micro-size); letter-spacing: 0.16em; } /* ── LABEL/META ── the floating control bar (search · filters · view) ── Bumped off the old 6.5px micro-type to a readable Meta size; still compact enough for the two-row sticky header. */ .dh-ctx, .dh-legend, .doc-search-info, .cbx > summary, .cbx-acts button, .seg > button { font-family: var(--type-mono); font-size: var(--type-meta-size); letter-spacing: 0.08em; } .doc-search, .cbx-panel label { font-family: var(--type-sans); font-size: var(--type-body-size); } /* ── Empty / placeholder states ───────────────────────────────────────── */ .doc-empty, .doc-placeholder p { font-family: var(--type-mono); font-size: var(--type-label-size); }