/* ============================================================ BuilderNow - Design Tokens ------------------------------------------------------------ Single source of truth for colors, typography, spacing, and other visual primitives. Every other stylesheet pulls from these variables - never hard-code colors or sizes anywhere else. ============================================================ */ :root { /* ======================================================== BRAND COLORS ------------------------------------------------------- Primary: Confident blue - the new BuilderNow face. Accent: Original BuilderNow yellow - kept for continuity. Charcoal: Modernized dark - used for depth and contrast. Legacy: Original charcoal retained as secondary accent. ======================================================== */ --bn-primary: #2563eb; /* Main CTA color */ --bn-primary-hover: #1d4ed8; /* Hover state */ --bn-primary-active: #1e40af; /* Pressed/active */ --bn-primary-light: #dbeafe; /* Backgrounds, badges */ --bn-primary-lighter: #eff6ff; /* Subtle tints */ --bn-accent: #f7b71e; /* BuilderNow original yellow */ --bn-accent-hover: #e5a817; --bn-accent-light: #fef3c7; --bn-accent-lighter: #fffbeb; --bn-charcoal: #1f2937; /* Modernized deep charcoal */ --bn-charcoal-legacy: #333d40; /* Original BuilderNow charcoal */ /* ======================================================== NEUTRAL GRAY RAMP ======================================================== */ --bn-gray-50: #f9fafb; --bn-gray-100: #f3f4f6; --bn-gray-200: #e5e7eb; --bn-gray-300: #d1d5db; --bn-gray-400: #9ca3af; --bn-gray-500: #6b7280; --bn-gray-600: #4b5563; --bn-gray-700: #374151; --bn-gray-800: #1f2937; --bn-gray-900: #111827; /* ======================================================== SEMANTIC COLORS ======================================================== */ --bn-success: #10b981; --bn-success-light: #d1fae5; --bn-warning: #f59e0b; --bn-warning-light: #fef3c7; --bn-danger: #ef4444; --bn-danger-light: #fee2e2; --bn-info: #3b82f6; --bn-info-light: #dbeafe; /* ======================================================== TYPOGRAPHY ------------------------------------------------------- Single-family system using Inter for everything. Loaded via Google Fonts in the base template. System font fallback ensures nothing ever breaks. ======================================================== */ --bn-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --bn-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale (modular, 1.25 ratio) */ --bn-text-xs: 0.75rem; /* 12px */ --bn-text-sm: 0.875rem; /* 14px */ --bn-text-base: 1rem; /* 16px */ --bn-text-lg: 1.125rem; /* 18px */ --bn-text-xl: 1.25rem; /* 20px */ --bn-text-2xl: 1.5rem; /* 24px */ --bn-text-3xl: 1.875rem; /* 30px */ --bn-text-4xl: 2.25rem; /* 36px */ --bn-text-5xl: 3rem; /* 48px */ --bn-text-6xl: 3.75rem; /* 60px */ --bn-text-7xl: 4.5rem; /* 72px */ /* Font weights */ --bn-weight-normal: 400; --bn-weight-medium: 500; --bn-weight-semibold: 600; --bn-weight-bold: 700; --bn-weight-extrabold: 800; /* Line heights */ --bn-leading-tight: 1.25; --bn-leading-snug: 1.375; --bn-leading-normal: 1.5; --bn-leading-relaxed: 1.625; --bn-leading-loose: 2; /* Letter spacing */ --bn-tracking-tighter: -0.05em; --bn-tracking-tight: -0.025em; --bn-tracking-normal: 0; --bn-tracking-wide: 0.025em; --bn-tracking-wider: 0.05em; /* ======================================================== SPACING SCALE (4px base) ======================================================== */ --bn-space-1: 0.25rem; /* 4px */ --bn-space-2: 0.5rem; /* 8px */ --bn-space-3: 0.75rem; /* 12px */ --bn-space-4: 1rem; /* 16px */ --bn-space-5: 1.25rem; /* 20px */ --bn-space-6: 1.5rem; /* 24px */ --bn-space-8: 2rem; /* 32px */ --bn-space-10: 2.5rem; /* 40px */ --bn-space-12: 3rem; /* 48px */ --bn-space-16: 4rem; /* 64px */ --bn-space-20: 5rem; /* 80px */ --bn-space-24: 6rem; /* 96px */ --bn-space-32: 8rem; /* 128px */ /* ======================================================== BORDER RADIUS ======================================================== */ --bn-radius-none: 0; --bn-radius-sm: 0.25rem; /* 4px */ --bn-radius: 0.375rem; /* 6px */ --bn-radius-md: 0.5rem; /* 8px */ --bn-radius-lg: 0.75rem; /* 12px */ --bn-radius-xl: 1rem; /* 16px */ --bn-radius-2xl: 1.5rem; /* 24px */ --bn-radius-3xl: 2rem; /* 32px */ --bn-radius-full: 9999px; /* ======================================================== SHADOWS ======================================================== */ --bn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --bn-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10); --bn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10); --bn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10); --bn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10); --bn-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --bn-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); /* Colored shadows for CTAs */ --bn-shadow-primary: 0 10px 25px -5px rgb(37 99 235 / 0.35); --bn-shadow-accent: 0 10px 25px -5px rgb(247 183 30 / 0.35); /* ======================================================== TRANSITIONS ======================================================== */ --bn-ease: cubic-bezier(0.4, 0, 0.2, 1); --bn-ease-in: cubic-bezier(0.4, 0, 1, 1); --bn-ease-out: cubic-bezier(0, 0, 0.2, 1); --bn-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --bn-duration-fast: 150ms; --bn-duration: 200ms; --bn-duration-slow: 300ms; --bn-duration-slower: 500ms; --bn-transition: all var(--bn-duration) var(--bn-ease); --bn-transition-fast: all var(--bn-duration-fast) var(--bn-ease); --bn-transition-slow: all var(--bn-duration-slow) var(--bn-ease); /* ======================================================== LAYOUT ======================================================== */ --bn-container-sm: 640px; --bn-container-md: 768px; --bn-container-lg: 1024px; --bn-container-xl: 1280px; --bn-container-2xl: 1440px; --bn-container-max: 1280px; --bn-navbar-height: 92px; --bn-sidebar-width: 260px; /* ======================================================== Z-INDEX SCALE ======================================================== */ --bn-z-dropdown: 1000; --bn-z-sticky: 1020; --bn-z-fixed: 1030; --bn-z-modal-bg: 1040; --bn-z-modal: 1050; --bn-z-popover: 1060; --bn-z-tooltip: 1070; --bn-z-toast: 1080; } /* ============================================================ BOOTSTRAP 5 VARIABLE OVERRIDES ------------------------------------------------------------ Re-maps Bootstrap's core tokens to ours so any BS5 component inherits the BuilderNow look automatically. ============================================================ */ :root { --bs-primary: var(--bn-primary); --bs-primary-rgb: 37, 99, 235; --bs-secondary: var(--bn-charcoal); --bs-success: var(--bn-success); --bs-warning: var(--bn-accent); --bs-danger: var(--bn-danger); --bs-info: var(--bn-info); --bs-light: var(--bn-gray-50); --bs-dark: var(--bn-charcoal); --bs-body-color: var(--bn-gray-800); --bs-body-bg: #ffffff; --bs-body-font-family: var(--bn-font-sans); --bs-border-radius: var(--bn-radius-md); --bs-border-color: var(--bn-gray-200); --bs-link-color: var(--bn-primary); --bs-link-hover-color: var(--bn-primary-hover); }