/* ========================================================================= Provenience Design System — Core Tokens Colours and Type — v1.0 -------------------------------------------------------------------------- This file is the single canonical source of CSS variables for the Provenience visual system. Every artefact (web, slide, document, social) should consume these tokens directly. Locked rules (binding): - Background is #FBFBF9. NEVER pure white as a page background. - Gold (#CCA300) is reserved for accents — max 5% of any composition. - Type families: Source Serif 4 (display, ~5%) and Inter (everything else, ~95%). No other faces. - Italic is available for both faces (Inter and the serif). Use sparingly — prefer the serif for emphatic/display italics; Inter italic is for inline emphasis only. ========================================================================= */ /* ------------------------------------------------------------------------- Webfonts — both families self-hosted from /fonts/ (brand-supplied, SIL Open Font License). No external font CDN. ------------------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("../fonts/Inter-VariableFont_opsz_wght.woff2") format("woff2"), url("../fonts/Inter-VariableFont_opsz_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 75% 125%; font-style: normal; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/Inter-Italic-VariableFont_opsz_wght.woff2") format("woff2"), url("../fonts/Inter-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"); font-weight: 100 900; font-stretch: 75% 125%; font-style: italic; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-VariableFont_opsz_wght.woff2") format("woff2"), url("../fonts/SourceSerif4-VariableFont_opsz_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("../fonts/SourceSerif4-Italic-VariableFont_opsz_wght.woff2") format("woff2"), url("../fonts/SourceSerif4-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ------------------------------------------------------------------------- Size-matched fallback for Source Serif 4. "Source Serif Fallback" is Georgia with its metrics tuned (size-adjust, ascent/descent overrides) so it occupies almost exactly the same space as Source Serif 4. Result: when the real font loads (or fails), there is no visible reflow/jump — the FOUT becomes imperceptible, and if the web font never loads, the fallback already looks right. Tuned for Georgia → Source Serif 4 at display sizes. ------------------------------------------------------------------------- */ @font-face { font-family: "Source Serif Fallback"; src: local("Georgia"), local("Times New Roman"); ascent-override: 96%; descent-override: 28%; line-gap-override: 0%; size-adjust: 102%; font-display: swap; } :root { /* ---------- CORE PALETTE — LOCKED ---------- */ --color-navy: #0F172A; /* Primary */ --color-gold: #CCA300; /* Accent — max 5% */ --color-ink: #475569; /* Body text */ --color-bg: #FBFBF9; /* Page background — never pure white */ /* ---------- EXTENDED PALETTE ---------- */ --color-navy-hover: #1F2937; --color-gold-hover: #B89300; --color-gold-muted: #C8A75D; /* Use sparingly — table separators only */ --color-bg-alt: #F3F4F6; /* Alternate section background */ --color-bg-highlight: #EEF2F7; /* Highlight section background */ --color-bg-display: #F1F5F9; /* Optional ultra-soft cover bg */ --color-card: #FBFBF9; --color-card-hover: #F8F9FA; --color-border: #E6E8EC; --color-border-strong: #D1D5DB; --color-divider: #E5E7EB; --color-border-dark: #1F2937; /* ---------- TEXT ---------- */ --color-text-primary: #0F172A; --color-text-secondary: #475569; --color-text-tertiary: #64748B; --color-text-muted: #94A3B8; --color-text-on-dark: #FFFFFF; --color-text-on-dark-2: #CBD5E1; /* Alias: some component CSS (footer, closing CTA) references the longer name. Defined here in the canonical token file so it resolves on EVERY page, not only where sections.css loads. */ --color-text-on-dark-secondary: var(--color-text-on-dark-2); /* ---------- SEMANTIC (functional UI only — never editorial) ---------- */ --color-error: #B91C1C; --color-success: #15803D; --color-warning: #A16207; --color-info: #1E40AF; /* ---------- TYPE FAMILIES ---------- */ --font-display: "Source Serif 4", "Source Serif Fallback", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace; /* ---------- WEB TYPE SCALE (canonical) ---------- */ /* size / line-height / weight / letter-spacing */ --type-display-hero-size: 60px; --type-display-hero-lh: 68px; --type-display-hero-w: 600; --type-display-hero-ls: -0.02em; --type-h1-size: 48px; --type-h1-lh: 56px; --type-h1-w: 600; --type-h1-ls: -0.015em; --type-h2-size: 36px; --type-h2-lh: 44px; --type-h2-w: 600; --type-h2-ls: -0.01em; --type-h3-size: 28px; --type-h3-lh: 36px; --type-h3-w: 500; --type-h3-ls: -0.005em; --type-h4-size: 22px; --type-h4-lh: 30px; --type-h4-w: 500; --type-h4-ls: 0; --type-h5-size: 18px; --type-h5-lh: 26px; --type-h5-w: 600; --type-h5-ls: 0; --type-body-large-size: 18px; --type-body-large-lh: 28px; --type-body-large-w: 400; --type-body-size: 16px; --type-body-lh: 26px; --type-body-w: 400; --type-body-small-size: 14px; --type-body-small-lh: 22px; --type-body-small-w: 400; --type-caption-size: 13px; --type-caption-lh: 20px; --type-caption-w: 400; --type-caption-ls: 0.01em; --type-overline-size: 12px; --type-overline-lh: 16px; --type-overline-w: 600; --type-overline-ls: 0.08em; /* ---------- LAYOUT ---------- */ --container-max: 1200px; --content-max: 760px; --narrow-max: 640px; --grid-columns: 12; --grid-gutter: 24px; --section-pad-y: 80px; /* ---------- SPACING SCALE ---------- */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 80px; --space-5xl: 120px; /* ---------- RADIUS ---------- */ --radius-none: 0px; --radius-sm: 2px; --radius-md: 4px; /* Buttons, inputs */ --radius-lg: 6px; /* Cards */ /* Pill radius is NOT permitted on buttons. */ /* ---------- BORDERS ---------- */ --border-default: 1px solid #E6E8EC; --border-strong: 1px solid #D1D5DB; --border-divider: 1px solid #E5E7EB; --border-dark: 1px solid #1F2937; /* ---------- SHADOWS (minimal — borders carry structure) ---------- */ --shadow-card: 0 2px 6px rgba(15, 23, 42, 0.04); --shadow-card-hover: 0 4px 12px rgba(15, 23, 42, 0.06); --shadow-focus: 0 0 0 2px rgba(204, 163, 0, 0.4); /* ---------- MOTION ---------- */ --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 300ms; --easing: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); } /* ========================================================================= Semantic typography classes — apply these directly to elements. Headings use the scale; body has paragraph defaults. ========================================================================= */ html, body { font-family: var(--font-body); color: var(--color-text-primary); background: var(--color-bg); font-size: var(--type-body-size); line-height: var(--type-body-lh); font-weight: var(--type-body-w); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }