/* ============================================================ FidUlink AI — Design Tokens (sourced from the design system bundle `fidulink-ai-design-system/project/colors_and_type.css`) Brand Designer: TashaFay Hoggatt Wagner. Include this file FIRST in any page's , before page-specific stylesheets, so page CSS can consume the tokens via var(--fid-*), var(--fg-*), var(--bg-*), etc. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap"); :root { /* ---------- COLOR — Brand primaries (PDF page 5) ---------- */ --fid-light-blue: #5A9AC5; --fid-bright-blue: #0086C9; --fid-deep-blue: #32506E; --fid-ink: #252021; --fid-black: #000000; --fid-white: #FFFFFF; --fid-stone: #E1E1E1; /* Tints derived for UI */ --fid-light-blue-12: rgba(90, 154, 197, 0.12); --fid-light-blue-24: rgba(90, 154, 197, 0.24); --fid-deep-blue-08: rgba(50, 80, 110, 0.08); --fid-deep-blue-16: rgba(50, 80, 110, 0.16); --fid-deep-blue-90: rgba(50, 80, 110, 0.92); --fid-bright-blue-12: rgba(0, 134, 201, 0.12); /* Paper tints used as page surfaces */ --fid-paper: #F7FAFC; --fid-mist: #EEF3F7; --fid-fog: #DCE6EE; /* ---------- Semantic tokens ---------- */ --fg-1: var(--fid-ink); --fg-2: var(--fid-deep-blue); --fg-3: #5C6B78; --fg-muted: #8A98A4; --fg-on-dark: var(--fid-white); --fg-on-dark-muted: rgba(255,255,255,0.72); --bg-1: var(--fid-white); --bg-2: var(--fid-paper); --bg-3: var(--fid-mist); --bg-inverse: var(--fid-deep-blue); --bg-inverse-2: var(--fid-ink); --border-1: var(--fid-stone); --border-2: #C8D3DD; --border-strong: var(--fid-deep-blue); --accent: var(--fid-bright-blue); --accent-hover: #006FA6; --accent-press: #005A88; /* Status (kept restrained to brand mood) */ --success: #3F8F6E; --warning: #C28A2B; --danger: #B5462E; --info: var(--fid-bright-blue); /* ---------- Typography ---------- */ --font-display: "Libre Baskerville", "Baskerville", "Baskerville Old Face", Garamond, "Times New Roman", serif; --font-body: "Hanken Grotesk", "Aktiv Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Type scale */ --fs-display: 64px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-body: 16px; --fs-small: 14px; --fs-meta: 12px; --fs-eyebrow: 11px; --lh-tight: 1.12; --lh-snug: 1.28; --lh-normal: 1.48; --lh-relaxed: 1.6; --tracking-eyebrow: 0.16em; --tracking-button: 0.04em; /* ---------- Spacing (4px base) ---------- */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---------- Radii ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- Shadows — soft, paper-on-paper ---------- */ --shadow-1: 0 1px 2px rgba(37,32,33,0.06), 0 1px 1px rgba(37,32,33,0.04); --shadow-2: 0 4px 14px rgba(50,80,110,0.10), 0 1px 2px rgba(50,80,110,0.06); --shadow-3: 0 12px 32px rgba(50,80,110,0.14), 0 2px 6px rgba(50,80,110,0.08); --shadow-inset: inset 0 0 0 1px var(--border-1); --ring-focus: 0 0 0 3px rgba(0,134,201,0.32); /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 360ms; /* ---------- Layout ---------- */ --container-w: 1200px; --container-px: 24px; }