/* VLR Studio: design tokens. Base: Nexus Governance brand (navy ink, cream paper, taupe rules). Light only, by decision (see docs/ui.md). Values live here only; docs name tokens, never hex. Breakpoints (media queries cannot read custom properties): mobile < 640px single column, bottom-sheet sources margin >= 1200px quote cards in the right margin column */ :root { color-scheme: light; /* ---------- Colour: paper and ink ---------- */ --bg: #F5F5F2; /* brand cream; the page you read on */ --surface: #FFFFFF; /* cards, inputs, popovers, modals */ --surface-muted: #F0EFEA; /* table headers, hovered rows on white */ --text: #0F1C2E; /* brand ink: body and headings */ --text-secondary: #5A6578; /* brand muted: metadata, help text (5.4:1 on --bg) */ --text-faint: #8A93A1; /* placeholders, disabled only; never information */ --inverse-bg: #0F1C2E; /* toasts */ --inverse-text: #F5F5F2; --border: #E2DFD6; /* hairlines: cards, dividers, table rules */ --border-strong: #CFCBBF; /* secondary buttons, hovered cards, drop zone */ --border-control: #8E8B80; /* inputs, checkboxes (3.4:1 on white, WCAG 1.4.11) */ /* ---------- Colour: the one accent ---------- */ --accent: #233554; /* brand navy: primary buttons, links, markers, focus */ --accent-hover: #1A2842; --accent-soft: #E6E9EF; /* hover/selected fills, drag-over */ --accent-ring: rgba(35, 53, 84, 0.18); --on-accent: #FFFFFF; /* Taupe is paper, not an accent */ --rule: #D6CFB8; /* brand taupe: eyebrow rule, quote-card rule, link underline */ --highlight: #EFE7CF; /* highlighter wash on the passage whose source is open; ::selection */ /* ---------- Colour: status (muted, never louder than the SDGs) ---------- */ --success: #2E6B4E; --success-bg: #E5EFE8; --warning: #8A5A12; --warning-bg: #F6EEDB; --danger: #A8332B; --danger-bg: #F7E6E3; /* ---------- Colour: SDGs (UN official, untouched) ---------- */ --sdg-1: #E5243B; --sdg-2: #DDA63A; --sdg-3: #4C9F38; --sdg-4: #C5192D; --sdg-5: #FF3A21; --sdg-6: #26BDE2; --sdg-7: #FCC30B; --sdg-8: #A21942; --sdg-9: #FD6925; --sdg-10: #DD1367; --sdg-11: #FD9D24; --sdg-12: #BF8B2E; --sdg-13: #3F7E44; --sdg-14: #0A97D9; --sdg-15: #56C02B; --sdg-16: #00689D; --sdg-17: #19486A; --on-sdg: #FFFFFF; /* UN convention: white numerals on every goal */ /* ---------- Type: families ---------- */ /* UI face: vendored (vendor/fonts/fonts.css). */ --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Reading face: vendor Source Serif 4 once (see docs/ui.md); until then the system serifs carry it. */ --font-reading: 'Source Serif 4', 'Source Serif Pro', 'Iowan Old Style', Charter, 'Sitka Text', Cambria, Georgia, serif; /* Not used in Studio UI; kept for copied internal modules. */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---------- Type: UI scale (Inter) ---------- */ --fs-xs: 0.75rem; /* 12 eyebrows (uppercase, tracked), captions */ --fs-sm: 0.8125rem; /* 13 metadata, help/error text, source lines */ --fs-md: 0.875rem; /* 14 default UI: buttons, lists, toasts */ --fs-base: 1rem; /* 16 inputs (no iOS zoom), modal body */ --fs-lg: 1.125rem; /* 18 landing subline, modal title */ /* ---------- Type: display scale (Source Serif 4) ---------- */ --fs-xl: 1.375rem; /* 22 card titles, empty-state sentence */ --fs-2xl: 1.75rem; /* 28 UI page titles */ --fs-3xl: 2.625rem; /* 42 chapter title */ --fs-display: clamp(2.5rem, 1.6rem + 3vw, 3.75rem); /* 40 to 60 landing hero */ /* ---------- Type: reading (the chapter) ---------- */ --read-size: 1.1875rem; /* 19 body */ --read-h2: 1.625rem; /* 26 */ --read-h3: 1.25rem; /* 20 */ --read-small: 0.9375rem; /* 15 quote cards, boxes, tables, notes */ --lh-display: 1.1; --lh-heading: 1.25; --lh-ui: 1.45; --lh-read: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --track-eyebrow: 0.08em; --track-display: -0.015em; /* ---------- Space (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- Layout ---------- */ --topbar-h: 56px; --measure: 680px; /* ~68 characters at --read-size */ --measure-wide: 880px; /* tables, boxes, recommendations break out to this */ --margin-col: 288px; /* quote-card column at >= 1200px */ --margin-gap: 48px; --page-max: 1120px; /* UI pages */ --form-max: 560px; --page-pad: 32px; /* ---------- Shape ---------- */ --radius-sm: 2px; /* buttons, inputs, markers */ --radius: 4px; /* cards, callouts, quote card, toast */ --radius-lg: 6px; /* modal, bottom sheet */ --radius-full: 999px; /* spinner and avatar only */ /* Flat in flow; shadows only on floating layers */ --shadow-pop: 0 1px 2px rgba(15, 28, 46, 0.06), 0 8px 24px -6px rgba(15, 28, 46, 0.18); --shadow-modal: 0 2px 4px rgba(15, 28, 46, 0.06), 0 24px 64px -12px rgba(15, 28, 46, 0.32); --scrim: rgba(15, 28, 46, 0.36); --focus-outline: 2px solid var(--accent); --focus-offset: 2px; /* ---------- Motion: fade + 4px slide, nothing bounces ---------- */ --dur-1: 120ms; /* hover, press, colour */ --dur-2: 200ms; /* popover, quote card, toast */ --dur-3: 320ms; /* modal, bottom sheet */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Stacking ---------- */ --z-topbar: 10; --z-popover: 20; --z-toast: 30; --z-modal: 40; /* ---------- Aliases for copied internal modules (names they reference) ---------- */ --font: var(--font-ui); --mono: var(--font-mono); --vlr-serif: var(--font-reading); --navy: var(--accent); --link: var(--accent); --text-muted: var(--text-secondary); --border-soft: var(--border); --ease: var(--ease-out); } @media (max-width: 639px) { :root { --read-size: 1.0625rem; /* 17 */ --read-h2: 1.375rem; --fs-3xl: 2rem; --page-pad: 16px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; /* 1ms, not 0, so transitionend still fires */ --dur-2: 1ms; --dur-3: 1ms; } }