/** * BuzzRFP Design Tokens * * Grayscale-first design system inspired by monitorworkspace.com * All sizing, spacing, and color decisions flow from these tokens. * Tailwind CDN config in base.html references these CSS custom properties. * * Density control: change --density-base to scale everything. * 13px = compact | 14px = default | 15px = comfortable | 16px = spacious * * TOKEN CONTRACT (design-review 2026-08, backlog #9): * - THIS FILE owns STRUCTURE: density, spacing, radius, shadows, z-index, * the grayscale ramp, and semantic status colors. * - base.html's tenant :root (rendered from core.tenant_branding) owns * IDENTITY: --primary-color / --secondary-color / --accent-color / * --background-color / --sidebar-accent-color / fonts. It loads LAST * and wins. theme-buzzrfp's --gov-blue/--gov-gold chain to it. * - The two vocabularies COMPOSE, never compete: structure tokens must * not encode brand hues; identity variables must not encode sizes. * - Known same-name collisions across the theme sheets are audited in * docs/design-review/data/token_collisions.json (later sheet wins by * load order; normalize opportunistically, never repaint silently). */ :root { /* ============================================ DENSITY CONTROL ============================================ */ /* --density-base IS DELIBERATELY NOT DECLARED HERE. (WG-83 items 3 + 4) * * This sheet used to be linked only when density mode was on, so the whole * token contract below was absent for everyone else — tokens that exist and * are never loaded. It is now linked unconditionally, and base.html supplies * --density-base inline when (and only when) density is on. * * A DEFAULT HERE WOULD BE A SILENT LAPTOP REGRESSION. theme-buzzrfp.css:930 * reads `font-size: var(--density-base, 14px)` inside * @media (min-width: 1024px) and (max-width: 1439px) — the 14px laptop root * comes from that FALLBACK, which only fires while the variable is * undefined. Declaring 13px (or 16px, or 100%) here would make every laptop * silently adopt it instead, with nothing in this file saying so. * * So: undefined by default, which leaves `html { font-size: var(--density-base) }` * below invalid-at-computed-value-time and therefore dropped — the root * keeps the browser's own font size, honouring a reader who raised it. When * density is on, base.html declares the variable and both rules resolve to it. */ /* ============================================ FONT FAMILIES ============================================ */ --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "Cascadia Code", "Consolas", monospace; /* ============================================ FONT SIZES (rem = relative to --density-base) ============================================ */ --text-xs: 0.769rem; /* 10px @ 13px base */ --text-sm: 0.846rem; /* 11px @ 13px base */ --text-base: 1rem; /* 13px @ 13px base */ --text-lg: 1.077rem; /* 14px @ 13px base */ --text-xl: 1.154rem; /* 15px @ 13px base */ --text-2xl: 1.385rem; /* 18px @ 13px base */ --text-3xl: 1.538rem; /* 20px @ 13px base */ --text-4xl: 1.846rem; /* 24px @ 13px base */ /* ============================================ LINE HEIGHTS ============================================ */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ============================================ FONT WEIGHTS ============================================ */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ============================================ GRAYSCALE PALETTE (neutral backbone) ============================================ */ --color-white: #ffffff; --color-grey-50: #fafafa; --color-grey-100: #f5f5f5; --color-grey-200: #e5e5e5; --color-grey-300: #d4d4d4; --color-grey-400: #a3a3a3; /* #737373 (Tailwind neutral-500) failed AA as text — 4.35:1 on the #f5f5f5 body. Kept in step with --neutral-500 in theme-buzzrfp.css, which is the ramp that actually ships: THIS sheet is gated behind {% if density_base_px %} in base.html and DENSITY_MODE defaults to "off", so these tokens are undefined on most pages. Changed here too so the density and GRMS/notify renders do not disagree with the default one. */ --color-grey-500: #666666; --color-grey-600: #525252; --color-grey-700: #404040; --color-grey-800: #262626; --color-grey-900: #171717; --color-black: #0a0a0a; /* ============================================ SEMANTIC COLORS (mapped from grey + status) ============================================ */ /* Backgrounds */ --color-bg: var(--color-white); --color-bg-subtle: var(--color-grey-50); --color-bg-muted: var(--color-grey-100); --color-surface: var(--color-white); --color-surface-hover: var(--color-grey-50); /* Borders */ --color-border: var(--color-grey-200); --color-border-strong: var(--color-grey-300); /* Text */ --color-text: var(--color-grey-900); --color-text-secondary: var(--color-grey-600); --color-text-muted: var(--color-grey-400); --color-text-inverse: var(--color-white); /* Accent (dark — used for primary buttons, active states) */ --color-accent: var(--color-grey-900); --color-accent-hover: var(--color-grey-700); /* Status */ --color-danger: #b91c1c; --color-danger-bg: #fef2f2; --color-success: #15803d; --color-success-bg: #f0fdf4; --color-warning: #a16207; --color-warning-bg: #fefce8; --color-info: #1d4ed8; --color-info-bg: #eff6ff; /* ============================================ BRAND COLORS (BuzzRFP identity — used sparingly) ============================================ */ --brand-navy: #112E51; --brand-blue: #205493; --brand-teal: #3B82A0; --brand-gold: #FBBF24; --brand-red: #B51D09; /* Sidebar uses brand navy */ --sidebar-bg: #1E3A5F; --sidebar-text: rgba(255, 255, 255, 0.7); --sidebar-text-active: #ffffff; --sidebar-border: rgba(255, 255, 255, 0.1); --sidebar-hover: rgba(255, 255, 255, 0.1); --sidebar-active-bg: var(--brand-teal); /* ============================================ SPACING (4px base unit) ============================================ */ --space-0: 0; --space-1: 0.25rem; /* 3.25px @ 13px */ --space-2: 0.5rem; /* 6.5px */ --space-3: 0.75rem; /* 9.75px */ --space-4: 1rem; /* 13px */ --space-5: 1.25rem; /* 16.25px */ --space-6: 1.5rem; /* 19.5px */ --space-8: 2rem; /* 26px */ --space-10: 2.5rem; /* 32.5px */ --space-12: 3rem; /* 39px */ --space-16: 4rem; /* 52px */ /* ============================================ BORDER RADIUS ============================================ */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* ============================================ SHADOWS ============================================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.1); /* ============================================ TRANSITIONS ============================================ */ --transition-fast: 150ms ease; --transition-base: 200ms ease; /* ============================================ LAYOUT DIMENSIONS ============================================ */ --nav-height: 3.5rem; /* 45.5px @ 13px — compact nav */ --sidebar-width: 240px; --sidebar-width-min: 80px; --content-max-width: 1600px; /* Wide content area */ --content-padding: var(--space-6); /* ============================================ Z-INDEX SCALE ============================================ */ --z-sidebar: 40; --z-nav: 50; --z-overlay: 30; --z-modal: 60; --z-toast: 70; } /* ============================================ ROOT FONT SIZE (density control) ============================================ */ html { /* Undefined unless density mode is on — see the DENSITY CONTROL note above. Invalid var() means this declaration is dropped, not zeroed, so the root falls back to the browser's own size. */ font-size: var(--density-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================ VIEWPORT / ZOOM RAMP (WG-83 item 4) ============================================ THE SECOND DENSITY AXIS, AND WHY IT LIVES HERE NOW. --density-base scales rem values. It cannot answer browser zoom, because zoom changes the effective viewport rather than the root font size. This ramp was written for that and lived inline in base.html (~40 lines, three steps), which meant the console had TWO vocabularies for "make this denser" and no single file owning either. WG-84's F4: "the two vocabularies compose, never compete... Either can win. Two cannot." They now compose, in one sheet: --density-base -> type, via the root font size (rem) this ramp -> spacing and display sizes, via the viewport SIX OF THE ORIGINAL EIGHT VARIABLES WERE DELETED, NOT MOVED. --content-gap, --section-margin, --icon-badge-size, --kpi-icon-size, --header-padding and --icon-badge-radius were declared at three breakpoints each and read by NOTHING — 18 of the 24 declared values were dead. Promoting them into the canonical token sheet would have made this file assert a scale it does not drive, which is the same defect as a token sheet nobody loads. The two that are genuinely consumed are kept, with their steps intact: --card-padding opportunity_detail.html:18-19 --stat-value-size includes/page_header_pro.html:10 Both consumers pass their own var() fallback, so these declarations refine them rather than being load-bearing. Add a variable back here when something reads it, not in advance of that. */ :root { --card-padding: 1.5rem; --stat-value-size: 1.875rem; } /* 150% zoom on 1920px ~ 1280px effective, or actual 1280-1399px screens */ @media (max-width: 1399px) { :root { --card-padding: 1.125rem; --stat-value-size: 1.5rem; } } /* 175% zoom ~ 1097px, or actual small laptops */ @media (max-width: 1099px) { :root { --card-padding: 0.875rem; --stat-value-size: 1.25rem; } } /* ============================================ SCROLLBAR STYLING (thin, grayscale) ============================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--color-grey-100); } ::-webkit-scrollbar-thumb { background: var(--color-grey-300); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-grey-400); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-grey-300) var(--color-grey-100); }