/* ============================================================ 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 { /* ======================================================== NATIVE WIDGETS ------------------------------------------------------- Everything the browser draws ITSELF rather than from the rules below: the open list of a fixed it, because the popup is not in the DOM and no stylesheet reaches it. One line here is what makes the browser's own chrome agree with the palette. Anything added later that leans on a native control gets it for free rather than shipping white and being found later. ======================================================== */ color-scheme: dark; /* ======================================================== 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. ======================================================== */ /* ---- Dark-theme surfaces ------------------------------------ Added for the dark conversion. --bn-charcoal keeps its literal dark value because the amber button still needs real dark ink on it. Everything that used charcoal as a BACKGROUND now uses --bn-surface-deep; everything that used it as TEXT uses --bn-text-strong. The gray ramp above is inverted, so rules referencing it flipped without being edited. */ --bn-surface: #111827; /* page */ --bn-surface-raised: #1f2937; /* cards, inputs, panels */ --bn-surface-deep: #0b111d; /* nav, footer, contrast bands */ --bn-text-strong: #f9fafb; /* headings and emphasis */ --bn-border: #374151; --bn-link: #8ab4ff; /* blue TEXT on dark; the fill blue is too dark to read */ --bn-primary: #2563eb; /* Main CTA color */ --bn-primary-hover: #1d4ed8; /* Hover state */ --bn-primary-active: #1e40af; /* Pressed/active */ --bn-primary-light: #1e3a8a; /* Backgrounds, badges */ --bn-primary-lighter: #172554; /* Subtle tints */ --bn-accent: #f7b71e; /* BuilderNow original yellow */ --bn-accent-hover: #e5a817; --bn-accent-light: #4a3a12; --bn-accent-lighter: #332710; --bn-charcoal: #1f2937; /* Modernized deep charcoal */ --bn-charcoal-legacy: #333d40; /* Original BuilderNow charcoal */ /* ======================================================== NEUTRAL GRAY RAMP ======================================================== */ --bn-gray-50: #111827; --bn-gray-100: #1f2937; --bn-gray-200: #374151; --bn-gray-300: #4b5563; --bn-gray-400: #9aa6b5; --bn-gray-500: #9ca3af; --bn-gray-600: #d1d5db; --bn-gray-700: #e5e7eb; --bn-gray-800: #f3f4f6; --bn-gray-900: #f9fafb; /* ======================================================== SEMANTIC COLORS ======================================================== */ --bn-success: #10b981; --bn-success-light: #064e3b; --bn-warning: #f59e0b; --bn-warning-light: #4a3a12; --bn-danger: #ef4444; --bn-danger-light: #4c1d1d; --bn-info: #3b82f6; --bn-info-light: #1e3a8a; /* ======================================================== 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.35); --bn-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.45); --bn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.45); --bn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.45), 0 4px 6px -4px rgb(0 0 0 / 0.45); --bn-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.45), 0 8px 10px -6px rgb(0 0 0 / 0.45); --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.35); /* 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); }