/* ========================================================================== PSC Design Tokens — single source of truth ========================================================================== Every value here traces to an audited decision in one of the two source projects (rfp app / psc-website). See README.md § Provenance. Structure: 1. Fonts (self-hosted, from the rfp app) 2. Shared tokens on :root — identical in every variant (color roles that don't vary, type scale, spacing scale, layout) 3. Variant tokens — same role names, different values: [data-variant="soft"] (default, also set on :root) [data-variant="brutal"] Set data-variant on or on any container; variants nest freely. Breakpoints (CSS vars can't drive media queries — use these values): 640px (sm) · 768px (md) · 1024px (lg) ========================================================================== */ @font-face { font-family: 'Space Grotesk'; src: url('./fonts/spacegrotesk-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; } @font-face { font-family: 'Quicksand'; src: url('./fonts/quicksand-latin.woff2') format('woff2'); font-weight: 300 700; font-display: swap; } /* -------------------------------------------------------------------------- Shared — identical across variants -------------------------------------------------------------------------- */ :root { /* Color roles that do not change by variant */ --surface: #faf8f0; /* page background (warm cream) */ --surface-raised: #ffffff; /* cards, panels, anything sitting on the page */ --surface-sunken: #fbfaf6; /* recessed fills (input wells in soft) */ --text: #1a1a1a; /* primary ink */ --text-soft: #4a4a4a; /* secondary text */ --text-muted: #6b6b6b; /* labels, timestamps, placeholders */ --accent: #2e5e4e; /* brand green (PSC) */ --accent-contrast: #ffffff; /* text/icon on accent fills */ --focus-ring: 0 0 0 3px rgba(46, 94, 78, 0.12); /* Type — one scale for both variants; rhythm never varies */ --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Quicksand', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Monaco', 'Consolas', 'Courier New', monospace; --text-xs: 0.75rem; /* micro-labels, kickers, badges */ --text-sm: 0.875rem; /* dense UI text (dominant app size) */ --text-base: 1rem; /* body prose */ --text-md: 1.125rem; /* leads, subheads, wordmark */ --text-lg: 1.375rem; /* card titles */ --text-xl: 1.6rem; /* page titles */ --text-2xl: 1.9rem; /* stat / KPI values */ --text-title: clamp(1.75rem, 4vw, 2.625rem); /* section headlines */ --text-display: clamp(2.375rem, 6.2vw, 4.25rem); /* hero headlines */ /* Slide type — same fluid coefficients as the page scale, but relative to the slide's own 16:9 canvas (cqi), so a slide renders proportionally at any size: full-screen deck, thumbnail, or demo pane */ --slide-display: min(6.2cqi, 4.25rem); --slide-title: min(4cqi, 2.625rem); --slide-text: min(2.2cqi, 1.25rem); --slide-caption: min(1.5cqi, 0.875rem); --slide-pad: 6cqi; --slide-pad-sm: 2cqi; --weight-medium: 500; /* body default, labels */ --weight-semibold: 600; /* buttons, nav, card titles */ --weight-bold: 700; /* headlines, stats, wordmark */ --leading-body: 1.6; --leading-heading: 1.2; --leading-display: 1.08; --tracking-display: -0.02em; --tracking-heading: -0.01em; --tracking-caps: 0.06em; /* with uppercase micro-labels only */ /* Spacing — 4px grid */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; /* Layout */ --measure: 1080px; /* content max-width */ --radius-pill: 9999px; --motion: 0.15s ease; } /* -------------------------------------------------------------------------- Variant: soft (default) — rounded, diffuse, muted -------------------------------------------------------------------------- */ :root, [data-variant="soft"] { --border: #e6e1d6; /* hairline on warm surfaces */ --border-hover: #d9d3c6; /* border deepens on hover */ --border-emphasis: #1a1a1a; /* the border that means business */ --border-w: 1px; --border-w-strong: 1px; --radius-control: 11px; /* inputs, chips, nav links */ --radius-surface: 18px; /* cards, panels, slides */ --radius-action: var(--radius-pill); /* buttons are pills */ --shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 30px rgba(26, 26, 26, 0.06); --shadow-lift: 0 2px 4px rgba(26, 26, 26, 0.05), 0 18px 50px rgba(26, 26, 26, 0.10); --highlight: rgba(46, 94, 78, 0.09); /* hover wash, quiet accent fill */ --action: var(--text); /* primary action fill: ink pill */ --action-contrast: var(--surface); --action-shadow: none; --action-shadow-hover: var(--shadow); --action-shadow-active: none; --action-shift-hover: translateY(-1px); --action-shift-active: translateY(0); --surface-input: var(--surface-sunken); --nav-surface: rgba(250, 248, 240, 0.78); /* translucent cream */ --nav-text: var(--text); --nav-border: var(--border); --nav-shadow: none; --badge-border: transparent; --positive-surface: rgba(46, 94, 78, 0.10); --positive-text: var(--accent); --danger-surface: rgba(184, 83, 47, 0.10); --danger-text: #b8532f; } /* -------------------------------------------------------------------------- Variant: brutal — hard edges, thick ink, offset shadows, saturated -------------------------------------------------------------------------- */ [data-variant="brutal"] { --border: #1a1a1a; --border-hover: #1a1a1a; --border-emphasis: #1a1a1a; --border-w: 2px; --border-w-strong: 3px; --radius-control: 8px; --radius-surface: 12px; --radius-action: 8px; --shadow: 4px 4px 0 #1a1a1a; --shadow-lift: 6px 6px 0 #1a1a1a; --highlight: #fef3c7; /* saturated amber pop on hover */ --action: var(--accent); /* primary action fill: brand green */ --action-contrast: var(--accent-contrast); --action-shadow: 4px 4px 0 #1a1a1a; --action-shadow-hover: 2px 2px 0 #1a1a1a; /* pressing in… */ --action-shadow-active: 0 0 0 #1a1a1a; /* …fully seated */ --action-shift-hover: translate(2px, 2px); --action-shift-active: translate(4px, 4px); --surface-input: var(--surface-raised); --nav-surface: var(--accent); --nav-text: var(--accent-contrast); --nav-border: #1a1a1a; --nav-shadow: 0 4px 0 #1a1a1a; --badge-border: #1a1a1a; --positive-surface: #ccfbf1; --positive-text: #1a1a1a; --danger-surface: #fecaca; --danger-text: #1a1a1a; }