/* * ═══════════════════════════════════════════════════════════════ * SHANI FINSERVE — Design System Tokens v4.0 * Single source of truth for all visual design parameters. * ═══════════════════════════════════════════════════════════════ */ :root { /* ── Color Palette ─────────────────────────────── */ --sf-primary: #0d5152; --sf-primary-dark: #062e2f; --sf-primary-light: #1a7475; --sf-primary-lighter: #248f91; --sf-accent: #23dbe0; --sf-accent-light: #5ae8ec; --sf-accent-dark: #17b0b5; --sf-accent-glow: rgba(35, 219, 224, 0.15); --sf-accent-glow-strong: rgba(35, 219, 224, 0.3); --sf-success: #10b981; --sf-warning: #f59e0b; --sf-danger: #ef4444; --sf-info: #3b82f6; /* ── Backgrounds ───────────────────────────────── */ --sf-bg-soft: #f2fafa; --sf-bg-softer: #f8fcfc; --sf-bg-glass: rgba(255, 255, 255, 0.72); --sf-bg-glass-strong: rgba(255, 255, 255, 0.88); --sf-bg-dark: #090f11; --sf-bg-dark-card: rgba(255, 255, 255, 0.03); --sf-bg-dark-card-hover: rgba(255, 255, 255, 0.06); /* ── Dark Mega Panel (Glassmorphism) ────────────── */ --sf-panel-bg-start: rgba(6, 16, 18, 0.96); --sf-panel-bg-end: rgba(4, 10, 12, 0.98); --sf-panel-border: rgba(255, 255, 255, 0.06); --sf-panel-blur: blur(28px) saturate(220%); --sf-panel-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 40px 120px rgba(0, 0, 0, 0.65), 0 0 80px rgba(35, 219, 224, 0.08); --sf-panel-radius: 32px; /* ── Header ─────────────────────────────────────── */ --sf-header-height: 84px; --sf-header-height-scrolled: 72px; --sf-header-bg: rgba(4, 12, 14, 0.85); --sf-header-bg-scrolled: rgba(3, 8, 10, 0.94); --sf-header-border: rgba(35, 219, 224, 0.08); --sf-header-border-scrolled: rgba(35, 219, 224, 0.16); --sf-panel-bridge-height: 24px; /* ── Typography ────────────────────────────────── */ --sf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --sf-font-heading: 'Manrope', 'Inter', sans-serif; --sf-font-nav: 'Inter', 'General Sans', sans-serif; --sf-text-primary: #0d5152; --sf-text-body: #334155; --sf-text-muted: #5a6872; --sf-text-subtle: #94a3b8; --sf-text-white: #f8fafc; /* ── Nav Link Colors ───────────────────────────── */ --sf-nav-text: rgba(255, 255, 255, 0.82); --sf-nav-text-hover: #23dbe0; --sf-nav-text-scrolled: rgba(255, 255, 255, 0.78); --sf-nav-pill-bg: rgba(35, 219, 224, 0.08); --sf-nav-pill-border: rgba(35, 219, 224, 0.2); /* ── Mega Menu Content Colors ──────────────────── */ --sf-mega-heading: #23dbe0; --sf-mega-title: #ffffff; --sf-mega-desc: rgba(255, 255, 255, 0.68); --sf-mega-desc-hover: rgba(255, 255, 255, 0.9); --sf-mega-icon: #23dbe0; /* ── Borders ───────────────────────────────────── */ --sf-border-soft: rgba(13, 81, 82, 0.08); --sf-border-medium: rgba(13, 81, 82, 0.15); --sf-border-dark: rgba(255, 255, 255, 0.08); --sf-border-accent: rgba(35, 219, 224, 0.2); /* ── Shadow Depth Hierarchy ────────────────────── */ --sf-shadow-xs: 0 1px 3px rgba(13, 81, 82, 0.03); --sf-shadow-sm: 0 2px 8px rgba(13, 81, 82, 0.04); --sf-shadow-card: 0 4px 24px rgba(13, 81, 82, 0.06); --sf-shadow-md: 0 8px 32px rgba(13, 81, 82, 0.08); --sf-shadow-lg: 0 12px 40px rgba(13, 81, 82, 0.12); --sf-shadow-hover: 0 16px 48px rgba(13, 81, 82, 0.14); --sf-shadow-xl: 0 24px 64px rgba(13, 81, 82, 0.18); --sf-shadow-mega: 0 32px 80px rgba(13, 81, 82, 0.2); --sf-shadow-btn: 0 4px 16px rgba(35, 219, 224, 0.3); --sf-shadow-glow: 0 0 40px rgba(35, 219, 224, 0.2); /* ── Spacing Scale (4px base) ──────────────────── */ --sf-space-1: 4px; --sf-space-2: 8px; --sf-space-3: 12px; --sf-space-4: 16px; --sf-space-5: 20px; --sf-space-6: 24px; --sf-space-8: 32px; --sf-space-10: 40px; --sf-space-12: 48px; --sf-space-16: 64px; --sf-space-20: 80px; --sf-space-24: 96px; --sf-space-30: 120px; --sf-space-40: 160px; /* ── Border Radius ─────────────────────────────── */ --sf-radius-xs: 6px; --sf-radius-sm: 12px; --sf-radius-md: 16px; --sf-radius-lg: 24px; --sf-radius-xl: 32px; --sf-radius-2xl: 40px; --sf-radius-full: 9999px; /* ── Gradients ──────────────────────────────────── */ --sf-gradient-primary: linear-gradient(135deg, #0d5152 0%, #1a7475 50%, #23dbe0 100%); --sf-gradient-accent: linear-gradient(135deg, #23dbe0 0%, #17b0b5 100%); --sf-gradient-dark: linear-gradient(135deg, #0d5152 0%, #031414 100%); --sf-gradient-hero: linear-gradient(135deg, #0d5152 0%, #062e2f 40%, #031414 100%); --sf-gradient-card: linear-gradient(135deg, rgba(35, 219, 224, 0.08), rgba(13, 81, 82, 0.04)); --sf-gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); --sf-gradient-text: linear-gradient(135deg, var(--sf-primary), var(--sf-accent)); --sf-gradient-border: linear-gradient(135deg, var(--sf-accent), var(--sf-primary)); /* ── Glassmorphism Presets ──────────────────────── */ --sf-glass-blur: blur(20px); --sf-glass-blur-strong: blur(40px); --sf-glass-bg: rgba(255, 255, 255, 0.72); --sf-glass-bg-dark: rgba(9, 15, 17, 0.85); --sf-glass-border: 1px solid rgba(255, 255, 255, 0.18); --sf-glass-border-dark: 1px solid rgba(255, 255, 255, 0.08); /* ── Animation Timing ──────────────────────────── */ --sf-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --sf-transition-fast: 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); --sf-transition-slow: 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); --sf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sf-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --sf-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* ── Z-Index Scale ─────────────────────────────── */ --sf-z-dropdown: 100; --sf-z-sticky: 200; --sf-z-header: 500; --sf-z-mega-panel: 510; --sf-z-overlay: 900; --sf-z-modal: 1000; --sf-z-fab: 998; --sf-z-toast: 10000; /* ── Dark Backgrounds (Phase 2 prep) ────────────── */ --sf-bg-base: #031314; --sf-bg-surface: #07191A; --sf-bg-elevated: #081F20; --sf-accent-blue: #00C2FF; }