/** * Hermanos Marketing Website - Theme Variables * Defines color schemes for light and dark modes */ :root { /* Brand Colors */ --primary-color: #2563eb; --primary-hover: #1d4ed8; --primary-light: #3b82f6; --secondary-color: #10b981; --secondary-hover: #059669; --accent-color: #f59e0b; --accent-hover: #d97706; /* Light Mode - Neutrals */ --bg-primary: #ffffff; --bg-secondary: #f9fafb; --bg-tertiary: #f3f4f6; --text-primary: #111827; --text-secondary: #6b7280; --text-tertiary: #9ca3af; /* UI Elements - Light Mode */ --border-color: #e5e7eb; --border-color-dark: #d1d5db; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Status Colors */ --success-color: #10b981; --warning-color: #f59e0b; --error-color: #ef4444; --info-color: #3b82f6; /* Spacing Scale (8px base) */ --spacing-xs: 0.5rem; /* 8px */ --spacing-sm: 1rem; /* 16px */ --spacing-md: 1.5rem; /* 24px */ --spacing-lg: 2rem; /* 32px */ --spacing-xl: 3rem; /* 48px */ --spacing-2xl: 4rem; /* 64px */ --spacing-3xl: 6rem; /* 96px */ /* Typography */ --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-heading: var(--font-primary); --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Border Radius */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-base: 200ms ease-in-out; --transition-slow: 300ms ease-in-out; /* Z-Index Scale */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* Container Widths */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; } /** * Dark Mode Theme * Applied when [data-theme="dark"] is set on element */ [data-theme="dark"] { /* Dark Mode - Neutrals */ --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; /* UI Elements - Dark Mode */ --border-color: #334155; --border-color-dark: #475569; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4); /* Adjust primary colors for dark mode visibility */ --primary-color: #3b82f6; --primary-hover: #2563eb; --secondary-color: #10b981; --secondary-hover: #059669; } /** * Smooth theme transition */ * { transition-property: background-color, border-color, color, fill, stroke; transition-duration: var(--transition-base); transition-timing-function: ease-in-out; } /* Disable transitions for motion-sensitive users */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /** * Theme-aware selection colors */ ::selection { background-color: var(--primary-color); color: #ffffff; } ::-moz-selection { background-color: var(--primary-color); color: #ffffff; }