/* ======================================== DESIGN TOKENS - Variables & Constants Balanced Cyberpunk-Corporate Aesthetic ======================================== */ :root { /* ===== COLOR PALETTE ===== */ /* Background Colors - Dark but professional */ --color-bg-primary: hsl(220, 22%, 10%); /* Deep navy-black (softer than pure black) */ --color-bg-secondary: hsl(220, 18%, 14%); /* Slightly lighter for contrast */ --color-bg-card: hsl(220, 16%, 18%); /* Card backgrounds */ --color-bg-elevated: hsl(220, 15%, 22%); /* Elevated elements (modals, dropdowns) */ /* Text Colors */ --color-text-primary: hsl(0, 0%, 96%); /* Almost white, easy on eyes */ --color-text-secondary: hsl(0, 0%, 75%); /* Medium gray for secondary text */ --color-text-muted: hsl(0, 0%, 55%); /* Muted gray for less important text */ --color-text-inverse: hsl(220, 22%, 10%); /* Dark text for light backgrounds */ /* Brand Colors - From logo (cyan & green) */ --color-brand-cyan: hsl(195, 100%, 50%); /* Bright cyan #00BFFF */ --color-brand-green: hsl(145, 100%, 45%); /* Vibrant green #00E673 */ --color-brand-blue: hsl(220, 85%, 58%); /* Professional blue accent */ /* Accent Colors - Balanced tech feel */ --color-accent-primary: hsl(195, 100%, 50%); /* Cyan (main CTA) */ --color-accent-secondary: hsl(145, 100%, 45%); /* Green (secondary actions) */ --color-accent-tertiary: hsl(220, 85%, 58%); /* Blue (highlights) */ /* Semantic Colors */ --color-success: hsl(145, 65%, 45%); --color-warning: hsl(45, 100%, 55%); --color-error: hsl(0, 75%, 55%); --color-info: hsl(195, 85%, 55%); /* Gradients - Subtle tech feel */ --gradient-primary: linear-gradient(135deg, hsl(195, 100%, 50%) 0%, hsl(220, 85%, 58%) 100%); --gradient-secondary: linear-gradient(135deg, hsl(145, 100%, 45%) 0%, hsl(195, 100%, 50%) 100%); --gradient-accent: linear-gradient(135deg, hsl(220, 85%, 58%) 0%, hsl(195, 100%, 50%) 100%); /* Overlay & Glass Effects */ --overlay-dark: hsla(220, 22%, 10%, 0.85); --overlay-light: hsla(0, 0%, 100%, 0.05); --glass-bg: hsla(220, 16%, 18%, 0.7); --glass-border: hsla(0, 0%, 100%, 0.1); /* ===== TYPOGRAPHY ===== */ /* Font Families */ --font-display: 'Orbitron', sans-serif; /* Tech-forward display font */ --font-body: 'Exo 2', sans-serif; /* Modern, readable body font */ --font-accent: 'Rajdhani', sans-serif; /* Bold accent font for CTAs */ /* Font Sizes - Fluid Typography */ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem); --text-4xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem); --text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem); /* Font Weights */ --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* Line Heights */ --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.8; /* Letter Spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* ===== SPACING ===== */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */ --space-4xl: 6rem; /* 96px */ --space-5xl: 8rem; /* 128px */ /* Section Spacing */ --section-padding-mobile: var(--space-3xl); --section-padding-desktop: var(--space-5xl); /* Container Widths */ --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1536px; /* ===== BORDERS & RADIUS ===== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* Fully rounded */ --border-width: 1px; --border-width-thick: 2px; /* ===== SHADOWS ===== */ --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); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Glow Effects - Tech accent */ --glow-cyan: 0 0 20px hsla(195, 100%, 50%, 0.4), 0 0 40px hsla(195, 100%, 50%, 0.2); --glow-green: 0 0 20px hsla(145, 100%, 45%, 0.4), 0 0 40px hsla(145, 100%, 45%, 0.2); --glow-blue: 0 0 20px hsla(220, 85%, 58%, 0.4), 0 0 40px hsla(220, 85%, 58%, 0.2); /* ===== TRANSITIONS & ANIMATIONS ===== */ --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; --transition-slower: 500ms ease-in-out; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ===== Z-INDEX SCALE ===== */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; /* ===== BREAKPOINTS (for reference in media queries) ===== */ /* --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; */ } /* ===== DARK MODE ADJUSTMENTS ===== */ /* (Already dark by default, but can add light mode toggle later) */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-slower: 0ms; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }