/* * NEXA POINT GROUP — Design Tokens * Brand: #001BEF (primary blue), #2197F1 (secondary blue), #000000 (black) * Two themes: light (default) and dark. Toggled via [data-theme="dark"] on . */ :root { /* ─── Brand Palette ─── */ --brand-blue: #001BEF; --brand-blue-light: #2197F1; --brand-black: #000000; /* ─── Gradient ─── */ --gradient-brand: linear-gradient(135deg, #001BEF 0%, #2197F1 100%); --gradient-brand-r: linear-gradient(135deg, #2197F1 0%, #001BEF 100%); --gradient-hero: linear-gradient(160deg, #001BEF 0%, #0A3BFF 40%, #2197F1 100%); --gradient-card: linear-gradient(135deg, rgba(0,27,239,0.06) 0%, rgba(33,151,241,0.06) 100%); /* ─── Light Theme Surfaces ─── */ --color-bg: #F5F8FF; --color-bg-alt: #EEF3FF; --color-surface: #FFFFFF; --color-surface-raised: #FFFFFF; --color-surface-overlay: rgba(255,255,255,0.85); /* ─── Light Theme Text ─── */ --color-text: #07091C; --color-text-muted: #4A5580; --color-text-subtle: #8A97C0; --color-text-inverse: #FFFFFF; /* ─── Light Theme Accent ─── */ --color-accent: #001BEF; --color-accent-hover: #0015C5; --color-accent-light: #2197F1; --color-accent-subtle: #E8EEFF; --color-accent-glow: rgba(0, 27, 239, 0.12); /* ─── Light Theme Borders ─── */ --color-border: rgba(0, 27, 239, 0.10); --color-border-strong: rgba(0, 27, 239, 0.20); --color-border-subtle: rgba(0, 27, 239, 0.06); /* ─── Light Theme Shadows ─── */ --shadow-xs: 0 1px 2px rgba(0,27,239,0.06); --shadow-sm: 0 2px 8px rgba(0,27,239,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 20px rgba(0,27,239,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-lg: 0 8px 40px rgba(0,27,239,0.12), 0 4px 12px rgba(0,0,0,0.08); --shadow-xl: 0 16px 64px rgba(0,27,239,0.14), 0 8px 24px rgba(0,0,0,0.10); --shadow-glow: 0 0 24px rgba(33,151,241,0.30), 0 0 48px rgba(0,27,239,0.15); /* ─── Status Colours ─── */ --color-success: #00C48C; --color-warning: #FFB020; --color-error: #FF4842; --color-info: #2197F1; /* ─── Typography ─── */ --font-heading: 'Space Grotesk', 'Sora', system-ui, sans-serif; --font-body: 'Inter', 'Manrope', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* ─── Font Sizes (fluid) ─── */ --text-xs: clamp(0.70rem, 1.5vw, 0.75rem); --text-sm: clamp(0.82rem, 1.8vw, 0.875rem); --text-base: clamp(0.94rem, 2vw, 1rem); --text-lg: clamp(1.05rem, 2.2vw, 1.125rem); --text-xl: clamp(1.15rem, 2.5vw, 1.25rem); --text-2xl: clamp(1.35rem, 3vw, 1.5rem); --text-3xl: clamp(1.65rem, 3.5vw, 1.875rem); --text-4xl: clamp(2rem, 4.5vw, 2.5rem); --text-5xl: clamp(2.5rem, 5.5vw, 3.5rem); --text-6xl: clamp(3rem, 7vw, 4.5rem); --text-7xl: clamp(3.5rem, 8vw, 6rem); /* ─── Font Weights ─── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ─── Line Heights ─── */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed:1.75; /* ─── Letter Spacing ─── */ --tracking-tight: -0.03em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.15em; /* ─── Spacing Scale ─── */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* ─── Border Radius ─── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ─── Transitions ─── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Z-Index Scale ─── */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-nav: 300; --z-toast: 400; --z-max: 9999; /* ─── Layout ─── */ --container-max: 1280px; --container-wide: 1440px; --container-sm: 768px; --container-md: 1024px; /* ─── Nav height: compact fixed height independent of logo size ─── */ --nav-height: 80px; } /* ══════════════════════════════════════════════════════ DARK THEME Applied when ══════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ─── Dark Surfaces ─── */ --color-bg: #060C1E; --color-bg-alt: #080F25; --color-surface: #0C1630; --color-surface-raised: #112044; --color-surface-overlay: rgba(6, 12, 30, 0.90); /* ─── Dark Text ─── */ --color-text: #E8EEFF; --color-text-muted: #7A90BC; --color-text-subtle: #4A5880; --color-text-inverse: #07091C; /* ─── Dark Accent ─── */ --color-accent: #2197F1; --color-accent-hover: #3AAEFF; --color-accent-light: #001BEF; --color-accent-subtle: rgba(33,151,241,0.12); --color-accent-glow: rgba(33, 151, 241, 0.20); /* ─── Dark Borders ─── */ --color-border: rgba(33, 151, 241, 0.10); --color-border-strong: rgba(33, 151, 241, 0.22); --color-border-subtle: rgba(255, 255, 255, 0.04); /* ─── Dark Shadows ─── */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-sm: 0 2px 8px rgba(0,0,0,0.40); --shadow-md: 0 4px 20px rgba(0,0,0,0.50), 0 0 1px rgba(33,151,241,0.10); --shadow-lg: 0 8px 40px rgba(0,0,0,0.60), 0 0 1px rgba(33,151,241,0.15); --shadow-xl: 0 16px 64px rgba(0,0,0,0.70), 0 0 2px rgba(33,151,241,0.15); --shadow-glow: 0 0 32px rgba(33,151,241,0.40), 0 0 64px rgba(0,27,239,0.20); /* ─── Dark Gradient adjustments ─── */ --gradient-card: linear-gradient(135deg, rgba(33,151,241,0.06) 0%, rgba(0,27,239,0.06) 100%); }