/** * ============================================================================ * QENEX UNIFIED DESIGN SYSTEM - DESIGN TOKENS * Version: 2.0.0 * ============================================================================ * * These tokens are the single source of truth for all visual properties * across gptfinancial.sa, gptfinancial.co, gptfinancial.org, qenex.ai, * and sauditech.link * * USAGE: Import this file FIRST, before any other stylesheets * */ :root { /* ======================================================================== BRAND COLORS - Primary Palette ======================================================================== */ /* Deep Cosmic Indigo - The foundation */ --brand-primary: #2A1B3D; --brand-primary-rgb: 42, 27, 61; --brand-primary-dark: #1a0b2e; --brand-primary-deep: #0f0618; /* Violet - Elevated surfaces and secondary elements */ --brand-secondary: #44318D; --brand-secondary-rgb: 68, 49, 141; --brand-secondary-light: #5a3fa3; /* Lavender - Tertiary accents */ --brand-tertiary: #6B4BA3; --brand-tertiary-rgb: 107, 75, 163; /* ======================================================================== ACCENT COLORS - The "Energy" Colors ======================================================================== */ /* Electric Cyan - Primary accent (Speed, Technology, Data) */ --brand-accent: #00F0FF; --brand-accent-rgb: 0, 240, 255; --brand-accent-dim: rgba(0, 240, 255, 0.7); --brand-accent-glow: rgba(0, 240, 255, 0.4); --brand-accent-subtle: rgba(0, 240, 255, 0.1); --brand-accent-hover: #33f4ff; /* Quantum Magenta - Secondary accent (AI, Intelligence, Premium) */ --brand-magenta: #D83BD2; --brand-magenta-rgb: 216, 59, 210; --brand-magenta-dim: rgba(216, 59, 210, 0.7); --brand-magenta-glow: rgba(216, 59, 210, 0.4); --brand-magenta-subtle: rgba(216, 59, 210, 0.1); /* ======================================================================== SEMANTIC COLORS ======================================================================== */ /* Success / Bullish / Positive */ --color-success: #10b981; --color-success-rgb: 16, 185, 129; --color-success-bg: rgba(16, 185, 129, 0.15); --color-success-border: rgba(16, 185, 129, 0.3); /* Error / Bearish / Negative */ --color-error: #ef4444; --color-error-rgb: 239, 68, 68; --color-error-bg: rgba(239, 68, 68, 0.15); --color-error-border: rgba(239, 68, 68, 0.3); /* Warning / Caution */ --color-warning: #f59e0b; --color-warning-rgb: 245, 158, 11; --color-warning-bg: rgba(245, 158, 11, 0.15); /* Info */ --color-info: #3b82f6; --color-info-rgb: 59, 130, 246; --color-info-bg: rgba(59, 130, 246, 0.15); /* ======================================================================== TEXT COLORS - HIGH CONTRAST FOR DARK THEME ======================================================================== */ --text-primary: #F0F0F0; --text-secondary: #E0E0E8; --text-muted: #A9A9C9; --text-dim: #8B8BA9; --text-accent: var(--brand-accent); --text-inverse: #0f0618; /* Alternative naming for compatibility */ --color-text-primary: #F0F0F0; --color-text-secondary: #A9A9A9; /* ======================================================================== SURFACE / BACKGROUND COLORS ======================================================================== */ --surface-base: #0f0618; --surface-raised: rgba(42, 27, 61, 0.6); --surface-elevated: rgba(68, 49, 141, 0.3); --surface-overlay: rgba(68, 49, 141, 0.4); --surface-glass: rgba(26, 11, 46, 0.8); --surface-card: rgba(26, 13, 46, 0.9); /* Alternative surface colors for variety */ --surface-dark: #1a0d2e; --surface-darker: #0f0618; /* ======================================================================== BORDER COLORS ======================================================================== */ --border-subtle: rgba(0, 240, 255, 0.15); --border-default: rgba(0, 240, 255, 0.3); --border-strong: rgba(0, 240, 255, 0.5); --border-accent: var(--brand-accent); --border-muted: rgba(255, 255, 255, 0.1); /* Static border for non-glowing elements */ --border-static: #3d2a5a; /* ======================================================================== GRADIENTS ======================================================================== */ /* Primary brand gradient */ --gradient-brand: linear-gradient(135deg, #2A1B3D 0%, #D83BD2 100%); /* Text gradient (for headlines) */ --gradient-text: linear-gradient(135deg, #00F0FF 0%, #D83BD2 50%, #00F0FF 100%); --gradient-text-hero: linear-gradient(135deg, #FFFFFF 0%, #00F0FF 50%, #D83BD2 100%); /* Button gradients */ --gradient-button: linear-gradient(135deg, #44318D 0%, #D83BD2 100%); --gradient-button-hover: linear-gradient(135deg, #5a3fa3 0%, #e54fdf 100%); /* Background gradients */ --gradient-hero: linear-gradient(135deg, #1a0b2e 0%, #2A1B3D 50%, #44318D 100%); --gradient-radial: radial-gradient(ellipse at top right, #2A1B3D 0%, #1a0b2e 50%, #0f0618 100%); /* Nebula effect (signature QENEX background) */ --gradient-nebula: radial-gradient(circle at 20% 80%, rgba(68, 49, 141, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(216, 59, 210, 0.2) 0%, transparent 40%), radial-gradient(circle at 50% 50%, #0f0618 0%, #000000 100%); /* Card hover gradient */ --gradient-card-hover: linear-gradient( 145deg, rgba(68, 49, 141, 0.5) 0%, rgba(42, 27, 61, 0.7) 100% ); /* ======================================================================== GLOW EFFECTS - Signature QENEX Visual ======================================================================== */ --glow-cyan: 0 0 20px rgba(0, 240, 255, 0.4); --glow-cyan-sm: 0 0 10px rgba(0, 240, 255, 0.3); --glow-cyan-intense: 0 0 30px rgba(0, 240, 255, 0.6), 0 0 60px rgba(0, 240, 255, 0.3); --glow-cyan-button: 0 0 20px rgba(0, 240, 255, 0.4), 0 4px 20px rgba(0, 0, 0, 0.3); --glow-magenta: 0 0 20px rgba(216, 59, 210, 0.4); --glow-magenta-sm: 0 0 10px rgba(216, 59, 210, 0.3); --glow-magenta-intense: 0 0 30px rgba(216, 59, 210, 0.6), 0 0 60px rgba(216, 59, 210, 0.3); --glow-purple: 0 0 20px rgba(68, 49, 141, 0.5); /* Combined glow for emphasis */ --glow-combined: 0 0 20px rgba(0, 240, 255, 0.3), 0 0 40px rgba(216, 59, 210, 0.2); /* ======================================================================== BOX SHADOWS ======================================================================== */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.7); /* Shadow + Glow combination */ --shadow-glow: var(--glow-cyan), var(--shadow-lg); --shadow-card-hover: var(--glow-cyan), 0 20px 40px rgba(0, 0, 0, 0.4); /* ======================================================================== GLASSMORPHISM ======================================================================== */ --glass-bg: rgba(26, 11, 46, 0.7); --glass-bg-light: rgba(42, 27, 61, 0.5); --glass-border: rgba(0, 240, 255, 0.2); --glass-blur: blur(20px); --glass-blur-strong: blur(30px); --glass-saturate: saturate(180%); /* ======================================================================== TYPOGRAPHY ======================================================================== */ /* Font Families */ --font-display: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', monospace; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ --text-7xl: 4.5rem; /* 72px */ /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-extrabold: 800; /* Line Heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 1.8; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --tracking-caps: 0.15em; /* For uppercase labels */ /* ======================================================================== SPACING ======================================================================== */ --space-0: 0; --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ /* Semantic spacing aliases */ --space-xs: var(--space-1); /* 4px */ --space-sm: var(--space-2); /* 8px */ --space-md: var(--space-4); /* 16px */ --space-lg: var(--space-6); /* 24px */ --space-xl: var(--space-8); /* 32px */ --space-2xl: var(--space-12); /* 48px */ --space-3xl: var(--space-16); /* 64px */ /* ======================================================================== BORDER RADIUS ======================================================================== */ --radius-none: 0; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; /* ======================================================================== Z-INDEX SCALE ======================================================================== */ --z-below: -1; --z-base: 1; --z-dropdown: 100; --z-sticky: 500; --z-fixed: 900; --z-modal-backdrop: 950; --z-modal: 1000; --z-popover: 1100; --z-tooltip: 1500; --z-toast: 1700; --z-max: 9999; /* ======================================================================== TRANSITIONS & ANIMATION ======================================================================== */ /* Duration */ --duration-instant: 0ms; --duration-fast: 150ms; --duration-normal: 250ms; --duration-slow: 400ms; --duration-slower: 600ms; /* Easing */ --ease-linear: linear; --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); /* Combined transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; --transition-glow: 300ms ease-in-out; --transition-all-fast: all 150ms ease; --transition-all-base: all 250ms ease; --transition-transform: transform 250ms ease; --transition-opacity: opacity 250ms ease; --transition-colors: color 250ms ease, background-color 250ms ease, border-color 250ms ease; /* ======================================================================== LAYOUT ======================================================================== */ /* Container widths */ --container-xs: 320px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1280px; --container-2xl: 1400px; --container-3xl: 1600px; /* Navigation */ --nav-height: 80px; --nav-height-mobile: 70px; /* Touch targets (accessibility) */ --touch-target-min: 44px; /* ======================================================================== CHART COLORS (for data visualization) ======================================================================== */ --chart-line-primary: var(--brand-accent); --chart-line-secondary: var(--brand-magenta); --chart-fill-primary: rgba(0, 240, 255, 0.2); --chart-fill-secondary: rgba(216, 59, 210, 0.2); --chart-volume: var(--brand-secondary); --chart-grid: rgba(0, 240, 255, 0.1); --chart-positive: var(--color-success); --chart-negative: var(--color-error); --chart-tooltip-bg: var(--surface-card); /* ======================================================================== COMPONENT-SPECIFIC TOKENS ======================================================================== */ /* Buttons */ --btn-padding-y: var(--space-3); --btn-padding-x: var(--space-6); --btn-padding-y-sm: var(--space-2); --btn-padding-x-sm: var(--space-4); --btn-padding-y-lg: var(--space-4); --btn-padding-x-lg: var(--space-8); --btn-radius: var(--radius-md); /* Cards */ --card-padding: var(--space-6); --card-padding-lg: var(--space-8); --card-radius: var(--radius-lg); --card-border: var(--border-subtle); /* Inputs */ --input-padding-y: var(--space-3); --input-padding-x: var(--space-4); --input-radius: var(--radius-md); --input-border: var(--border-subtle); --input-focus-ring: 0 0 0 3px var(--brand-accent-subtle); /* Modal */ --modal-padding: var(--space-6); --modal-radius: var(--radius-xl); --modal-backdrop: rgba(15, 6, 24, 0.9); } /* ============================================================================ DARK MODE IS DEFAULT - No light mode needed for this design ============================================================================ */ /* ============================================================================ REDUCED MOTION PREFERENCES ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-glow: 0ms; } } /* ============================================================================ HIGH CONTRAST MODE ============================================================================ */ @media (prefers-contrast: high) { :root { --text-primary: #FFFFFF; --text-secondary: #FFFFFF; --border-subtle: rgba(255, 255, 255, 0.5); --border-default: rgba(255, 255, 255, 0.7); } }