/** * DBF Design Tokens * Auto-generated from Figma via /figma-sync — edit with care. * These use --dbf- prefix to avoid collisions with Webflow's --black, --blue, etc. * Add this file AFTER the Webflow CSS link in any page : * */ :root { /* ─── Colors ──────────────────────────────────────────────── */ --dbf-black: #000; --dbf-white: #fff; --dbf-white-smoke: #f8f8f8; /* maps to Webflow --white-smoke-2 */ --dbf-white-smoke-alt: #ebebeb; /* maps to Webflow --white-smoke */ --dbf-blue: #0d00ff; /* DBF primary brand color */ --dbf-silver: #c5c5c5; /* ─── Semantic aliases (use these in new CSS) ─────────────── */ --dbf-color-primary: var(--dbf-blue); --dbf-color-background: var(--dbf-white); --dbf-color-background-alt: var(--dbf-white-smoke); --dbf-color-text: var(--dbf-black); --dbf-color-border: var(--dbf-silver); --dbf-color-surface: var(--dbf-white-smoke-alt); /* ─── Typography ──────────────────────────────────────────── */ --dbf-font-primary: 'Inter', sans-serif; --dbf-font-mono: 'IBM Plex Mono', monospace; --dbf-font-accent: 'Inconsolata', monospace; /* ─── Spacing scale ───────────────────────────────────────── */ --dbf-space-1: 4px; --dbf-space-2: 8px; --dbf-space-3: 12px; --dbf-space-4: 16px; --dbf-space-6: 24px; --dbf-space-8: 32px; --dbf-space-12: 48px; --dbf-space-16: 64px; --dbf-space-20: 80px; --dbf-space-24: 96px; /* ─── Border radius ───────────────────────────────────────── */ --dbf-radius-sm: 4px; --dbf-radius-md: 8px; --dbf-radius-lg: 16px; --dbf-radius-xl: 24px; /* ─── Breakpoints (for reference — use in media queries) ──── */ /* --dbf-bp-tablet: 991px */ /* --dbf-bp-mobile: 767px */ /* --dbf-bp-mobile-sm: 478px */ }