/* ========================================================================== TrendHive Global Enterprises — Theme Variables Light theme is default; dark theme toggled via [data-theme="dark"] on ========================================================================== */ :root { /* Brand colors */ --color-primary: #2563EB; --color-primary-dark: #1D4ED8; --color-secondary: #111827; --color-accent: #10B981; --color-accent-dark: #059669; /* Surfaces */ --color-bg: #FFFFFF; --color-surface: #F9FAFB; --color-surface-alt: #F3F4F6; --color-border: #E5E7EB; /* Text */ --color-text: #111827; --color-text-muted: #6B7280; --color-text-inverse: #FFFFFF; /* Feedback */ --color-danger: #DC2626; --color-warning: #F59E0B; --color-success: var(--color-accent); /* Radii & shadows */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06); --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08); --shadow-lg: 0 10px 30px rgba(17, 24, 39, 0.12); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* Typography */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 2rem; --fs-4xl: 2.75rem; /* Layout */ --container-max: 1280px; --header-height: 72px; --transition-fast: 150ms ease; --transition-base: 250ms ease; /* Z-index scale */ --z-header: 100; --z-dropdown: 110; --z-modal: 200; --z-toast: 300; } /* Dark theme overrides */ [data-theme="dark"] { --color-bg: #0B1120; --color-surface: #111827; --color-surface-alt: #1F2937; --color-border: #1F2937; --color-text: #F9FAFB; --color-text-muted: #9CA3AF; --color-text-inverse: #111827; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); }