/* ============================================ config.pa.css — QuoteHomePros CSS custom properties: colors, spacing, borders, shadows, typography scale. Loaded last in so it can override any upstream defaults. Defines all CSS custom properties for QuoteHomePros. ============================================ */ :root { /* ── Brand Colors ─────────────────────────── */ --color-brand: #1B6FE8; /* Primary blue */ --color-brand-dark: #1558C0; /* Brand hover */ --color-brand-light: #EBF2FF; /* Brand tint bg */ --color-accent: #FF6B2B; /* CTA orange */ --color-accent-dark: #E55A1C; /* CTA hover */ --color-accent-light: #FFF3ED; /* Accent tint bg */ /* ── Text ─────────────────────────────────── */ --color-text-primary: #0F1623; --color-text-secondary: #4B5563; --color-text-muted: #9CA3AF; --color-text-inverse: #FFFFFF; /* ── Surfaces ─────────────────────────────── */ --color-bg-page: #F3F4F6; --color-bg-card: #FFFFFF; --color-bg-section-alt: #F9FAFB; /* Alternating section background */ --color-border: #E5E7EB; --color-border-focus: #1B6FE8; /* ── Semantic ─────────────────────────────── */ --color-star: #F59E0B; --color-green-bg: #ECFDF5; --color-green-text: #065F46; --color-toppro-bg: #FFF7ED; --color-toppro-text: #C2410C; --color-badge-bg: #EFF6FF; --color-badge-text: #1D4ED8; /* ── Hero / Form section ──────────────────── */ --color-hero-bg: #0F1623; /* Dark hero backdrop */ --color-hero-overlay: rgba(15,22,35,0.72); --color-form-bg: #FFFFFF; --color-form-border: #D1D5DB; /* ── Typography Scale ─────────────────────── */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px; --text-2xl: 28px; --text-3xl: 34px; --text-4xl: 42px; /* ── Spacing ──────────────────────────────── */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; /* ── Border Radius ────────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows ──────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --shadow-md: 0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05); --shadow-lg: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-xl: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08); --shadow-brand: 0 4px 20px rgba(27,111,232,0.25); /* ── Layout ───────────────────────────────── */ --max-width: 1180px; --max-width-content: 900px; --max-width-form: 600px; /* ── Transitions ──────────────────────────── */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; /* ── Z-index layers ───────────────────────── */ --z-header: 100; --z-modal: 999; --z-tooltip: 1000; /* ── Button tokens ────────────────────────── */ --btn-height: 52px; --btn-height-sm: 40px; --btn-font-size: 16px; --btn-font-weight: 800; --btn-radius: 10px; --btn-padding-x: 28px; /* ── Form tokens ──────────────────────────── */ --input-height: 52px; --input-font-size: 16px; --input-radius: 8px; --input-border: 1px solid var(--color-form-border); --input-shadow: inset 0 1px 3px rgba(0,0,0,0.06); } /* ── Dark mode stub ─────────────────────────── Reserved for future dark theme support. Uncomment and populate when needed. @media (prefers-color-scheme: dark) { :root { --color-bg-page: #0F1623; --color-bg-card: #1C2636; --color-text-primary: #F9FAFB; } } ─────────────────────────────────────────── */