/* ============================================================ Blue Fermion Design System — Token Foundation (Demeterics) ------------------------------------------------------------ Source of truth: "Blue Fermion Design System" skill (reverse-engineered from patdeg/bluefermion-web modern.css). This file is the consolidated token layer that brand.css and app.css build on. Primitives (colors, type, spacing, effects) are lifted VERBATIM from the design system. The SEMANTIC layer at the bottom is adapted for Demeterics (a Blue Fermion *Labs* product): TEAL leads as --bf-primary (action/signal), NAVY is the authority base. The navy->teal gradient stays the single signature accent — use it once per view (hero + one CTA). Fonts (Inter + JetBrains Mono) load via in the page for performance, not @import here. ============================================================ */ :root { /* ---- Primary: Navy (executive authority / base) ---- */ --bf-navy: #123C6B; --bf-navy-dark: #0A2847; --bf-navy-darker: #061B32; /* deepest command-center surface */ --bf-navy-light: #1E5494; --bf-navy-lighter: #2B6CB8; /* ---- Secondary: Teal (action / signal — Labs lead) ---- */ --bf-teal: #1DA7A0; --bf-teal-dark: #148B85; --bf-teal-light: #2BC4BC; --bf-teal-lighter: #4FD4CD; /* ---- Accents ---- */ --bf-gold: #FFB700; /* premium indicator, sparing */ --bf-orange: #FF6B35; /* warm alert / energy */ --bf-purple: #7B68EE; /* secondary data series */ --bf-cyan: #00D4FF; /* electric highlight */ --bf-yellow: #FFE66D; /* hero subhead on dark */ /* ---- Neutral ramp ---- */ --bf-gray-50: #FAFBFC; --bf-gray-100: #F3F4F6; --bf-gray-200: #E5E7EB; --bf-gray-300: #D1D5DB; --bf-gray-400: #9CA3AF; --bf-gray-500: #6B7280; --bf-gray-600: #4B5563; --bf-gray-700: #374151; --bf-gray-800: #1F2937; --bf-gray-900: #111827; --bf-white: #FFFFFF; --bf-black: #000000; /* ---- Status (derived from accents) ---- */ --bf-success: #1DA7A0; --bf-warning: #FFB700; --bf-danger: #E5484D; --bf-info: #1E5494; /* ---- RGB channels (for rgba() / shadows) ---- */ --bf-navy-rgb: 18, 60, 107; --bf-teal-rgb: 29, 167, 160; --bf-gold-rgb: 255, 183, 0; --bf-orange-rgb: 255, 107, 53; /* ---- Signature gradients ---- The navy->teal sweep is the ONE brand gradient (it echoes the orbital logo). Use it sparingly: hero, primary CTA, hairline accents. Prefer solids everywhere else. */ --bf-gradient-primary: linear-gradient(135deg, var(--bf-navy) 0%, var(--bf-teal) 100%); --bf-gradient-primary-reverse: linear-gradient(135deg, var(--bf-teal) 0%, var(--bf-navy) 100%); --bf-gradient-warm: linear-gradient(135deg, var(--bf-orange) 0%, var(--bf-gold) 100%); --bf-gradient-cool: linear-gradient(135deg, var(--bf-teal) 0%, var(--bf-purple) 100%); --bf-gradient-radial: radial-gradient(circle at top right, var(--bf-navy-light), transparent 50%); /* ======================================================== TYPOGRAPHY Inter for UI; JetBrains Mono for instrumented/data/code. Fluid clamp() scale; tight tracking on display. ======================================================== */ --bf-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bf-font-heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bf-font-mono: "JetBrains Mono", "Fira Code", "Monaco", "Courier New", monospace; --bf-text-xs: clamp(0.75rem, calc(0.70rem + 0.25vw), 0.875rem); --bf-text-sm: clamp(0.875rem, calc(0.80rem + 0.35vw), 1rem); --bf-text-base: clamp(1rem, calc(0.95rem + 0.25vw), 1.125rem); --bf-text-lg: clamp(1.125rem, calc(1.00rem + 0.50vw), 1.25rem); --bf-text-xl: clamp(1.25rem, calc(1.10rem + 0.75vw), 1.5rem); --bf-text-2xl: clamp(1.5rem, calc(1.30rem + 1.00vw), 2rem); --bf-text-3xl: clamp(2rem, calc(1.70rem + 1.50vw), 2.5rem); --bf-text-4xl: clamp(2.5rem, calc(2.00rem + 2.50vw), 3.5rem); --bf-text-5xl: clamp(3rem, calc(2.50rem + 3.00vw), 4rem); --bf-weight-normal: 400; --bf-weight-medium: 500; --bf-weight-semibold: 600; --bf-weight-bold: 700; --bf-weight-extrabold: 800; --bf-weight-black: 900; --bf-leading-tight: 1.2; --bf-leading-snug: 1.4; --bf-leading-normal: 1.6; --bf-leading-relaxed: 1.7; --bf-tracking-display: -0.03em; --bf-tracking-heading: -0.02em; --bf-tracking-body: -0.011em; --bf-tracking-wide: 0.04em; /* mono labels / eyebrows */ --bf-tracking-wider: 0.12em; /* uppercase schematic labels */ --bf-font-features: "cv11", "ss01", "ss03"; /* ======================================================== SPACING & LAYOUT — 8px base grid ======================================================== */ --bf-space-2xs: 0.25rem; /* 4px */ --bf-space-xs: 0.5rem; /* 8px */ --bf-space-sm: 1rem; /* 16px */ --bf-space-md: 1.5rem; /* 24px */ --bf-space-lg: 2rem; /* 32px */ --bf-space-xl: 3rem; /* 48px */ --bf-space-2xl: 4rem; /* 64px */ --bf-space-3xl: 6rem; /* 96px */ --bf-space-4xl: 8rem; /* 128px */ --bf-container-padding: clamp(1rem, 5vw, 3rem); --bf-container-max: 1200px; --bf-section-py: clamp(4rem, 10vh, 8rem); --bf-z-base: 1; --bf-z-sticky: 1030; --bf-z-overlay: 1040; --bf-z-modal: 1050; --bf-z-toast: 1080; /* ======================================================== EFFECTS — shadows, radii, blur, motion ======================================================== */ /* Elevation (neutral) */ --bf-shadow-xs: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.10); --bf-shadow-sm: 0 2px 4px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.10); --bf-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 10px 15px rgba(0,0,0,0.10); --bf-shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 20px 25px rgba(0,0,0,0.10); --bf-shadow-xl: 0 20px 40px rgba(0,0,0,0.10), 0 25px 50px rgba(0,0,0,0.12); --bf-shadow-2xl: 0 25px 50px rgba(0,0,0,0.15), 0 35px 60px rgba(0,0,0,0.15); /* Elevation (brand-tinted glow, for dark surfaces / primary) */ --bf-shadow-teal: 0 10px 40px rgba(var(--bf-teal-rgb), 0.30); --bf-shadow-navy: 0 10px 40px rgba(var(--bf-navy-rgb), 0.30); --bf-shadow-warm: 0 10px 40px rgba(var(--bf-orange-rgb), 0.25); /* Radius */ --bf-radius-sm: 0.25rem; /* 4px */ --bf-radius-md: 0.5rem; /* 8px — default control radius */ --bf-radius-lg: 0.75rem; /* 12px */ --bf-radius-xl: 1rem; /* 16px — default card radius */ --bf-radius-2xl: 1.5rem; /* 24px */ --bf-radius-full: 9999px; /* pills / dots */ /* Blur (glass / backdrop) */ --bf-blur-sm: blur(4px); --bf-blur-md: blur(8px); --bf-blur-lg: blur(20px); --bf-blur-xl: blur(40px); /* Borders */ --bf-border-width: 1px; --bf-border-hairline: rgba(0,0,0,0.05); /* Motion — single curve, predictable */ --bf-ease: cubic-bezier(0.4, 0, 0.2, 1); --bf-transition-fast: 150ms var(--bf-ease); --bf-transition-base: 300ms var(--bf-ease); --bf-transition-slow: 500ms var(--bf-ease); /* ======================================================== SEMANTIC ALIASES — role -> primitive (ADAPTED for Demeterics) Components/consumers reference THESE so the system re-themes in one place. TEAL leads as primary (Labs); NAVY is authority. ======================================================== */ --bf-primary: var(--bf-teal); --bf-primary-hover: var(--bf-teal-dark); --bf-accent: var(--bf-navy); --bf-accent-hover: var(--bf-navy-dark); --bf-highlight: var(--bf-gold); /* Surfaces (light mode) */ --bf-surface-page: var(--bf-gray-50); --bf-surface-card: var(--bf-white); --bf-surface-sunken: var(--bf-gray-100); --bf-surface-inverse: var(--bf-navy); /* Text */ --bf-text-heading: var(--bf-gray-900); --bf-text-body: var(--bf-gray-800); --bf-text-muted: var(--bf-gray-500); --bf-text-inverse: var(--bf-white); --bf-text-on-accent: var(--bf-white); --bf-text-link: var(--bf-teal); /* Borders */ --bf-border: var(--bf-gray-200); --bf-border-strong: var(--bf-gray-300); --bf-border-focus: var(--bf-teal); /* Control sizing */ --bf-control-height-sm: 2rem; --bf-control-height-md: 2.75rem; --bf-control-height-lg: 3.25rem; --bf-focus-ring: 0 0 0 3px rgba(var(--bf-teal-rgb), 0.35); } /* ============================================================ BOOTSTRAP BRIDGE — --bs-* -> brand tokens Both the app shells and the visitor/marketing shells load ds-tokens.css AFTER Bootstrap's CSS, so overriding Bootstrap's root variables here re-skins its buttons, links, utilities (.text-primary / .bg-primary / .border-primary / bg-opacity), focus rings, form controls and pagination to the brand — on every page, including the marketing pages that don't load brand.css. ============================================================ */ :root { --bs-primary: var(--bf-teal); --bs-primary-rgb: var(--bf-teal-rgb); --bs-primary-text-emphasis: var(--bf-teal-dark); --bs-primary-bg-subtle: rgba(var(--bf-teal-rgb), 0.10); --bs-primary-border-subtle: rgba(var(--bf-teal-rgb), 0.30); --bs-link-color: var(--bf-teal); --bs-link-color-rgb: var(--bf-teal-rgb); --bs-link-hover-color: var(--bf-teal-dark); --bs-link-hover-color-rgb: 20, 139, 133; /* teal-dark #148B85 */ --bs-body-font-family: var(--bf-font-body); --bs-border-color: var(--bf-border); --bs-border-color-translucent: var(--bf-border-hairline); --bs-border-radius: var(--bf-radius-md); --bs-border-radius-sm: var(--bf-radius-sm); --bs-border-radius-lg: var(--bf-radius-lg); --bs-border-radius-xl: var(--bf-radius-xl); --bs-border-radius-pill: var(--bf-radius-full); --bs-focus-ring-color: rgba(var(--bf-teal-rgb), 0.35); } /* ---- DARK MODE: command-center surfaces ---- */ [data-bf-theme="dark"] { --bf-surface-page: var(--bf-navy-darker); --bf-surface-card: rgba(255, 255, 255, 0.04); --bf-surface-sunken: var(--bf-navy-dark); --bf-surface-inverse: var(--bf-white); --bf-text-heading: var(--bf-white); --bf-text-body: rgba(255, 255, 255, 0.82); --bf-text-muted: rgba(255, 255, 255, 0.55); --bf-text-inverse: var(--bf-navy); --bf-text-link: var(--bf-teal-light); --bf-border: rgba(255, 255, 255, 0.10); --bf-border-strong: rgba(255, 255, 255, 0.18); --bf-border-focus: var(--bf-teal); }