/** * HBREA Brand Variables * * Single source of truth for all design tokens. * All colors, fonts, spacing, and other design values defined here. * * @package HBREA * @since 1.0.0 */ :root { /* ========================================================================== COLORS — Minimalist 2-hue palette: Blue family + Gold accent Navy for authority, Blue for action, Gold for warmth ========================================================================== */ /* Core Colors */ --hbrea-navy: #0A1F3F; /* Primary: nav, headers, footer, dark sections */ --hbrea-blue: #2B5EA7; /* Action: links, buttons, hover accents (Shield Blue) */ --hbrea-blue-light: #4A90D9; /* Lighter accent: hover states, focus rings */ --hbrea-blue-dark: #1E4A8A; /* Darker accent: hover on blue buttons */ --hbrea-black: #1A1A1A; /* Text, bold sections */ --hbrea-white: #FFFFFF; /* Backgrounds, card surfaces */ --hbrea-off-white: #F5F5F5; /* Alt backgrounds */ /* Warm Accent */ --hbrea-gold: #D4A843; /* CTAs: Donate, highlights, eyebrow labels */ --hbrea-gold-light: #E8C96A; /* Gold hover state */ --hbrea-gold-dark: #B8922E; /* Gold pressed/active state */ /* Backward-compatible aliases — component CSS references these. Will be removed once all CSS files are migrated to --hbrea-blue / --hbrea-gold. */ --hbrea-copper: var(--hbrea-blue); --hbrea-teal: var(--hbrea-blue-dark); /* Utility Colors */ --hbrea-gray-100: #F8F9FA; --hbrea-gray-200: #E9ECEF; --hbrea-gray-300: #DEE2E6; --hbrea-gray-400: #CED4DA; --hbrea-gray-500: #ADB5BD; --hbrea-gray-600: #6C757D; --hbrea-gray-700: #495057; --hbrea-gray-800: #343A40; --hbrea-gray-900: #212529; /* Semantic Colors */ --hbrea-success: #28A745; --hbrea-warning: #FFC107; --hbrea-error: #DC3545; --hbrea-info: #17A2B8; /* ========================================================================== TYPOGRAPHY ========================================================================== */ /* Font Families */ --hbrea-font-heading: 'Space Grotesk', 'Inter', 'Montserrat', system-ui, sans-serif; --hbrea-font-body: 'DM Sans', 'Inter', 'Open Sans', system-ui, sans-serif; --hbrea-font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font Sizes — Mobile First */ --hbrea-text-xs: 0.75rem; /* 12px */ --hbrea-text-sm: 0.875rem; /* 14px */ --hbrea-text-base: 1rem; /* 16px */ --hbrea-text-lg: 1.125rem; /* 18px */ --hbrea-text-xl: 1.25rem; /* 20px */ --hbrea-text-2xl: 1.5rem; /* 24px */ --hbrea-text-3xl: 1.875rem; /* 30px */ --hbrea-text-4xl: 2.25rem; /* 36px */ --hbrea-text-5xl: 3rem; /* 48px */ --hbrea-text-6xl: 3.75rem; /* 60px */ /* Font Weights */ --hbrea-font-normal: 400; --hbrea-font-medium: 500; --hbrea-font-semibold: 600; --hbrea-font-bold: 700; --hbrea-font-extrabold: 800; /* Line Heights */ --hbrea-leading-none: 1; --hbrea-leading-tight: 1.25; --hbrea-leading-snug: 1.375; --hbrea-leading-normal: 1.5; --hbrea-leading-relaxed: 1.625; --hbrea-leading-loose: 2; /* Letter Spacing */ --hbrea-tracking-tighter: -0.05em; --hbrea-tracking-tight: -0.025em; --hbrea-tracking-normal: 0; --hbrea-tracking-wide: 0.025em; --hbrea-tracking-wider: 0.05em; --hbrea-tracking-widest: 0.1em; /* ========================================================================== SPACING ========================================================================== */ --hbrea-space-0: 0; --hbrea-space-1: 0.25rem; /* 4px */ --hbrea-space-2: 0.5rem; /* 8px */ --hbrea-space-3: 0.75rem; /* 12px */ --hbrea-space-4: 1rem; /* 16px */ --hbrea-space-5: 1.25rem; /* 20px */ --hbrea-space-6: 1.5rem; /* 24px */ --hbrea-space-8: 2rem; /* 32px */ --hbrea-space-10: 2.5rem; /* 40px */ --hbrea-space-12: 3rem; /* 48px */ --hbrea-space-16: 4rem; /* 64px */ --hbrea-space-20: 5rem; /* 80px */ --hbrea-space-24: 6rem; /* 96px */ --hbrea-space-32: 8rem; /* 128px */ /* Section Spacing */ --hbrea-section-padding-mobile: var(--hbrea-space-12); --hbrea-section-padding: var(--hbrea-space-20); /* ========================================================================== LAYOUT ========================================================================== */ /* Container */ --hbrea-container-sm: 640px; --hbrea-container-md: 768px; --hbrea-container-lg: 1024px; --hbrea-container-xl: 1200px; --hbrea-container-2xl: 1400px; --hbrea-container: var(--hbrea-container-xl); /* Content Width */ --hbrea-content-width: 65ch; /* Gutter */ --hbrea-gutter: var(--hbrea-space-6); /* ========================================================================== BORDERS & RADIUS ========================================================================== */ --hbrea-radius-sm: 4px; --hbrea-radius: 8px; --hbrea-radius-md: 12px; --hbrea-radius-lg: 16px; --hbrea-radius-xl: 24px; --hbrea-radius-full: 9999px; --hbrea-border-width: 1px; --hbrea-border-color: var(--hbrea-gray-300); /* ========================================================================== SHADOWS ========================================================================== */ --hbrea-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --hbrea-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --hbrea-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); --hbrea-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --hbrea-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15); /* Card Shadow */ --hbrea-shadow-card: var(--hbrea-shadow); --hbrea-shadow-card-hover: var(--hbrea-shadow-lg); /* ========================================================================== TRANSITIONS ========================================================================== */ --hbrea-transition-fast: 150ms ease; --hbrea-transition: 200ms ease; --hbrea-transition-slow: 300ms ease; --hbrea-transition-slower: 500ms ease; /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --hbrea-z-dropdown: 100; --hbrea-z-sticky: 200; --hbrea-z-fixed: 300; --hbrea-z-overlay: 400; --hbrea-z-modal: 500; --hbrea-z-popover: 600; --hbrea-z-tooltip: 700; /* ========================================================================== COMPONENT TOKENS ========================================================================== */ /* Buttons */ --hbrea-btn-padding-x: var(--hbrea-space-6); --hbrea-btn-padding-y: var(--hbrea-space-3); --hbrea-btn-font-size: var(--hbrea-text-base); --hbrea-btn-font-weight: var(--hbrea-font-semibold); --hbrea-btn-radius: var(--hbrea-radius); --hbrea-btn-transition: var(--hbrea-transition); /* Primary Button (Blue) */ --hbrea-btn-primary-bg: var(--hbrea-blue); --hbrea-btn-primary-text: var(--hbrea-white); --hbrea-btn-primary-hover: var(--hbrea-blue-dark); /* Secondary Button (Gold) */ --hbrea-btn-secondary-bg: var(--hbrea-gold); --hbrea-btn-secondary-text: var(--hbrea-black); --hbrea-btn-secondary-hover: var(--hbrea-gold-dark); /* Outline Button */ --hbrea-btn-outline-border: var(--hbrea-navy); --hbrea-btn-outline-text: var(--hbrea-navy); --hbrea-btn-outline-hover-bg: var(--hbrea-navy); --hbrea-btn-outline-hover-text: var(--hbrea-white); /* Cards */ --hbrea-card-bg: var(--hbrea-white); --hbrea-card-padding: var(--hbrea-space-6); --hbrea-card-radius: var(--hbrea-radius-md); --hbrea-card-shadow: var(--hbrea-shadow-card); /* Forms */ --hbrea-input-padding-x: var(--hbrea-space-4); --hbrea-input-padding-y: var(--hbrea-space-3); --hbrea-input-border: var(--hbrea-border-color); --hbrea-input-radius: var(--hbrea-radius); --hbrea-input-focus-ring: var(--hbrea-blue); /* Header */ --hbrea-header-height: 80px; --hbrea-header-bg: var(--hbrea-white); /* Announcement Bar */ --hbrea-topbar-height: 44px; --hbrea-topbar-bg: var(--hbrea-black); --hbrea-topbar-text: var(--hbrea-white); /* Footer */ --hbrea-footer-bg: var(--hbrea-navy); --hbrea-footer-text: var(--hbrea-white); /* Hero */ --hbrea-hero-overlay: rgba(10, 31, 63, 0.75); --hbrea-hero-min-height: 70vh; } /* ========================================================================== RESPONSIVE ADJUSTMENTS ========================================================================== */ @media (min-width: 768px) { :root { --hbrea-text-4xl: 2.5rem; /* 40px */ --hbrea-text-5xl: 3.5rem; /* 56px */ --hbrea-text-6xl: 4.5rem; /* 72px */ } } @media (min-width: 1024px) { :root { --hbrea-header-height: 100px; --hbrea-hero-min-height: 80vh; } } /* ========================================================================== DARK MODE (Future Enhancement) ========================================================================== */ /* @media (prefers-color-scheme: dark) { :root { --hbrea-white: #1A1A1A; --hbrea-black: #FFFFFF; --hbrea-off-white: #2D2D2D; --hbrea-card-bg: #2D2D2D; } } */