/* ============================================================ VARIABLES.CSS — Design System Tokens All colors, spacing, typography, shadows, radii, and transitions are defined here for easy rebranding. ============================================================ */ :root { /* -------------------------------------------------------- COLOR PALETTE -------------------------------------------------------- */ /* Primary */ --clr-primary: #0A1628; --clr-primary-light: #132240; --clr-primary-dark: #060E1A; /* Secondary */ --clr-secondary: #1E293B; --clr-secondary-light: #334155; /* Accent */ --clr-accent: #2563EB; --clr-accent-hover: #3B82F6; --clr-accent-light: #60A5FA; --clr-accent-pale: #DBEAFE; --clr-accent-glow: rgba(37, 99, 235, 0.35); /* Backgrounds */ --clr-bg: #FFFFFF; --clr-bg-secondary: #F8FAFC; --clr-bg-tertiary: #F1F5F9; --clr-bg-dark: #0A1628; --clr-bg-dark-secondary: #0F1D32; /* Borders */ --clr-border: #E2E8F0; --clr-border-light: #F1F5F9; --clr-border-hover: #CBD5E1; /* Text */ --clr-text: #1E293B; --clr-text-secondary: #475569; --clr-text-muted: #94A3B8; --clr-text-light: #CBD5E1; --clr-text-white: #FFFFFF; --clr-text-white-muted: rgba(255, 255, 255, 0.7); /* Gradients */ --gradient-primary: linear-gradient(135deg, #2563EB 0%, #3B82F6 50%, #60A5FA 100%); --gradient-primary-hover: linear-gradient(135deg, #3B82F6 0%, #60A5FA 50%, #93C5FD 100%); --gradient-dark: linear-gradient(135deg, #0A1628 0%, #1E293B 100%); --gradient-cta: linear-gradient(135deg, #0A1628 0%, #132240 50%, #1E293B 100%); --gradient-text: linear-gradient(135deg, #2563EB, #60A5FA); --gradient-glow: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%); --gradient-hero-shape: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.05)); /* Status */ --clr-success: #10B981; --clr-warning: #F59E0B; --clr-error: #EF4444; /* -------------------------------------------------------- TYPOGRAPHY -------------------------------------------------------- */ --ff-primary: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Font sizes — Desktop */ --fs-hero: clamp(42px, 5vw, 72px); --fs-h1: clamp(36px, 4vw, 56px); --fs-h2: clamp(30px, 3.5vw, 48px); --fs-h3: clamp(22px, 2vw, 30px); --fs-h4: clamp(18px, 1.5vw, 22px); --fs-body: 18px; --fs-body-sm: 16px; --fs-small: 14px; --fs-xs: 12px; --fs-btn: 16px; --fs-label: 14px; --fs-nav: 15px; /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* Line heights */ --lh-tight: 1.15; --lh-heading: 1.25; --lh-body: 1.7; --lh-relaxed: 1.85; /* Letter spacing */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.06em; --ls-widest: 0.12em; /* -------------------------------------------------------- SPACING — 8px Grid -------------------------------------------------------- */ --space-1: 4px; /* 0.5 unit */ --space-2: 8px; /* 1 unit */ --space-3: 12px; /* 1.5 units */ --space-4: 16px; /* 2 units */ --space-5: 20px; /* 2.5 units */ --space-6: 24px; /* 3 units */ --space-7: 28px; --space-8: 32px; /* 4 units */ --space-10: 40px; /* 5 units */ --space-12: 48px; /* 6 units */ --space-14: 56px; --space-16: 64px; /* 8 units */ --space-20: 80px; /* 10 units */ --space-24: 96px; --space-28: 112px; --space-32: 128px; /* 16 units */ /* Section spacing */ --section-py: 120px; --section-py-sm: 80px; /* Container */ --container-max: 1280px; --container-px: 40px; --container-px-tablet: 24px; --container-px-mobile: 18px; /* -------------------------------------------------------- BORDER RADIUS -------------------------------------------------------- */ --radius-sm: 8px; --radius-md: 12px; --radius-btn: 14px; --radius-card: 22px; --radius-img: 24px; --radius-lg: 30px; --radius-xl: 40px; --radius-full: 9999px; /* -------------------------------------------------------- SHADOWS -------------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.02); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05), 0 8px 32px rgba(0, 0, 0, 0.03); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.06), 0 16px 48px rgba(0, 0, 0, 0.04); --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.05); --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.03); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08), 0 20px 56px rgba(0, 0, 0, 0.05); --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04); --shadow-btn: 0 4px 14px rgba(37, 99, 235, 0.30); --shadow-btn-hover: 0 6px 24px rgba(37, 99, 235, 0.45); --shadow-glow: 0 0 40px rgba(37, 99, 235, 0.20); /* -------------------------------------------------------- TRANSITIONS -------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 0.2s var(--ease-out); --transition-base: 0.35s var(--ease-out); --transition-slow: 0.5s var(--ease-out); --transition-slower: 0.7s var(--ease-out); /* -------------------------------------------------------- Z-INDEX LAYERS -------------------------------------------------------- */ --z-behind: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-cursor: 500; --z-preloader: 9999; }