/* ========================================================================== BRAVO THEME - CSS Custom Properties (Design Tokens) ========================================================================== All design tokens are defined here as CSS variables. These values can be overridden by WordPress Customizer inline styles. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COLOR PALETTE ------------------------------------------------------------------ */ /* Primary - Pink Rose */ --bravo-primary: #f8cdcf; --bravo-primary-dark: #e8a5a8; --bravo-primary-light: #fde8e9; --bravo-primary-rgb: 248, 205, 207; /* Secondary - Navy Dark */ --bravo-secondary: #0c111c; --bravo-secondary-light: #1a2332; --bravo-secondary-rgb: 12, 17, 28; /* Accent */ --bravo-accent: #fffde8; --bravo-accent-gold: #fff4c1; --bravo-accent-rgb: 255, 253, 232; /* Neutrals */ --bravo-dark: #000000; --bravo-light: #ffffff; --bravo-gray: #f7f6f4; --bravo-gray-light: #fcfcfc; --bravo-gray-medium: #e5e5e5; --bravo-gray-dark: #9ca3af; /* Text */ --bravo-text: #0c111c; --bravo-text-light: #ffffff; --bravo-text-muted: #6b7280; --bravo-text-inverse: #ffffff; /* Gradient */ --bravo-gradient-start: #d1e2f2; --bravo-gradient-end: #f8cdcf; /* Semantic */ --bravo-success: #10b981; --bravo-warning: #f59e0b; --bravo-error: #ef4444; /* ------------------------------------------------------------------ 2. TYPOGRAPHY - FONT FAMILY ------------------------------------------------------------------ */ --bravo-font-heading: 'Be Vietnam Pro', sans-serif; --bravo-font-body: 'Inter', sans-serif; --bravo-font-mono: 'JetBrains Mono', monospace; /* ------------------------------------------------------------------ 3. TYPOGRAPHY - FONT SIZE (Fluid with clamp) Base: 16px, Scale ratio: 1.25 (Major Third) ------------------------------------------------------------------ */ --bravo-fs-xs: clamp(0.75rem, 0.75rem + 0vw, 0.75rem); /* 12px → 12px */ --bravo-fs-sm: clamp(0.8125rem, 0.78rem + 0.14vw, 0.875rem); /* 13px → 14px */ --bravo-fs-base: clamp(0.9375rem, 0.87rem + 0.28vw, 1rem); /* 15px → 16px */ --bravo-fs-md: clamp(1rem, 0.93rem + 0.28vw, 1.125rem); /* 16px → 18px */ --bravo-fs-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem); /* 18px → 20px */ --bravo-fs-xl: clamp(1.25rem, 1.11rem + 0.56vw, 1.5rem); /* 20px → 24px */ --bravo-fs-2xl: clamp(1.5rem, 1.29rem + 0.83vw, 1.875rem); /* 24px → 30px */ --bravo-fs-3xl: clamp(1.875rem, 1.65rem + 0.83vw, 2.25rem); /* 30px → 36px */ --bravo-fs-4xl: clamp(2.25rem, 1.65rem + 2.5vw, 3rem); /* 36px → 48px */ --bravo-fs-5xl: clamp(3rem, 2.29rem + 2.78vw, 4rem); /* 48px → 64px */ --bravo-fs-display: clamp(3.5rem, 2.5rem + 4.17vw, 5rem); /* 56px → 80px */ /* ------------------------------------------------------------------ 4. TYPOGRAPHY - FONT WEIGHT ------------------------------------------------------------------ */ --bravo-fw-light: 300; --bravo-fw-regular: 400; --bravo-fw-medium: 500; --bravo-fw-semibold: 600; --bravo-fw-bold: 700; --bravo-fw-extrabold: 800; /* ------------------------------------------------------------------ 5. TYPOGRAPHY - LINE HEIGHT ------------------------------------------------------------------ */ --bravo-lh-tight: 1.1; --bravo-lh-snug: 1.3; --bravo-lh-normal: 1.6; --bravo-lh-relaxed: 1.8; /* ------------------------------------------------------------------ 6. TYPOGRAPHY - LETTER SPACING ------------------------------------------------------------------ */ --bravo-ls-tight: -0.02em; --bravo-ls-normal: 0; --bravo-ls-wide: 0.05em; --bravo-ls-wider: 0.1em; /* ------------------------------------------------------------------ 7. SPACING SCALE (4px base) ------------------------------------------------------------------ */ --bravo-space-1: 0.25rem; /* 4px */ --bravo-space-2: 0.5rem; /* 8px */ --bravo-space-3: 0.75rem; /* 12px */ --bravo-space-4: 1rem; /* 16px */ --bravo-space-5: 1.25rem; /* 20px */ --bravo-space-6: 1.5rem; /* 24px */ --bravo-space-8: 2rem; /* 32px */ --bravo-space-10: 2.5rem; /* 40px */ --bravo-space-12: 3rem; /* 48px */ --bravo-space-16: 4rem; /* 64px */ --bravo-space-20: 5rem; /* 80px */ --bravo-space-24: 6rem; /* 96px */ --bravo-space-32: 8rem; /* 128px */ /* ------------------------------------------------------------------ 8. LAYOUT ------------------------------------------------------------------ */ --bravo-container-sm: 640px; --bravo-container-md: 768px; --bravo-container-lg: 1024px; --bravo-container-xl: 1280px; --bravo-container-2xl: 1536px; --bravo-container-padding: var(--bravo-space-6); /* ------------------------------------------------------------------ 9. BORDER RADIUS ------------------------------------------------------------------ */ --bravo-radius-sm: 0.25rem; /* 4px */ --bravo-radius-md: 0.5rem; /* 8px */ --bravo-radius-lg: 0.75rem; /* 12px */ --bravo-radius-xl: 1rem; /* 16px */ --bravo-radius-2xl: 1.5rem; /* 24px */ --bravo-radius-full: 9999px; /* ------------------------------------------------------------------ 10. TRANSITIONS ------------------------------------------------------------------ */ --bravo-transition-fast: 150ms ease; --bravo-transition-base: 300ms ease; --bravo-transition-slow: 500ms ease; --bravo-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ------------------------------------------------------------------ 11. SHADOWS ------------------------------------------------------------------ */ --bravo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --bravo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --bravo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --bravo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); --bravo-shadow-glow: 0 0 20px rgba(var(--bravo-primary-rgb), 0.3); /* ------------------------------------------------------------------ 12. Z-INDEX SCALE ------------------------------------------------------------------ */ --bravo-z-dropdown: 100; --bravo-z-sticky: 200; --bravo-z-fixed: 300; --bravo-z-overlay: 400; --bravo-z-modal: 500; --bravo-z-popover: 600; --bravo-z-tooltip: 700; }