/* ═══════════════════════════════════════════════════════════════════════════ ELITE+ DESIGN TOKENS v5.0.1 Centralized design system variables for consistency Import this file first, then override with theme-specific values ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ═══════════════════════════════════════════════════════════════════════════ COLORS - SEMANTIC ═══════════════════════════════════════════════════════════════════════════ */ /* Backgrounds */ --color-bg-base: #09090b; --color-bg-elevated: #0f0f12; --color-bg-surface: #18181b; --color-bg-muted: #1f1f23; --color-bg-hover: #27272a; --color-bg-active: #3f3f46; /* Glass/Overlay */ --color-glass: rgba(255, 255, 255, 0.03); --color-glass-hover: rgba(255, 255, 255, 0.06); --color-glass-heavy: rgba(255, 255, 255, 0.08); --color-overlay: rgba(0, 0, 0, 0.6); --color-overlay-heavy: rgba(0, 0, 0, 0.8); /* Borders */ --color-border: rgba(255, 255, 255, 0.08); --color-border-light: rgba(255, 255, 255, 0.05); --color-border-strong: rgba(255, 255, 255, 0.12); --color-border-focus: #6366f1; /* Text */ --color-text-primary: #ffffff; --color-text-secondary: rgba(255, 255, 255, 0.7); --color-text-muted: rgba(255, 255, 255, 0.5); --color-text-disabled: rgba(255, 255, 255, 0.3); /* Accent - Primary (Indigo/Purple) */ --color-accent: #6366f1; --color-accent-hover: #818cf8; --color-accent-muted: rgba(99, 102, 241, 0.15); --color-accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); /* Semantic Colors */ --color-success: #22c55e; --color-success-muted: rgba(34, 197, 94, 0.15); --color-warning: #f59e0b; --color-warning-muted: rgba(245, 158, 11, 0.15); --color-error: #ef4444; --color-error-muted: rgba(239, 68, 68, 0.15); --color-info: #3b82f6; --color-info-muted: rgba(59, 130, 246, 0.15); /* Brand Colors */ --color-pro: #00f0ff; --color-pro-muted: rgba(0, 240, 255, 0.15); --color-premium: #ffd700; --color-premium-muted: rgba(255, 215, 0, 0.15); /* ═══════════════════════════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════════════════════════ */ --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; /* Font Sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 2rem; /* 32px */ --font-size-4xl: 2.5rem; /* 40px */ --font-size-5xl: 3rem; /* 48px */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ═══════════════════════════════════════════════════════════════════════════ SPACING ═══════════════════════════════════════════════════════════════════════════ */ --space-0: 0; --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 */ /* ═══════════════════════════════════════════════════════════════════════════ BORDERS & RADIUS ═══════════════════════════════════════════════════════════════════════════ */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 24px; --radius-full: 9999px; --border-width-thin: 1px; --border-width-medium: 2px; --border-width-thick: 3px; /* ═══════════════════════════════════════════════════════════════════════════ SHADOWS ═══════════════════════════════════════════════════════════════════════════ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.6); /* Colored Shadows */ --shadow-accent: 0 8px 32px rgba(99, 102, 241, 0.25); --shadow-pro: 0 8px 32px rgba(0, 240, 255, 0.2); --shadow-premium: 0 8px 32px rgba(255, 215, 0, 0.2); --shadow-success: 0 4px 16px rgba(34, 197, 94, 0.25); --shadow-error: 0 4px 16px rgba(239, 68, 68, 0.25); /* ═══════════════════════════════════════════════════════════════════════════ TRANSITIONS ═══════════════════════════════════════════════════════════════════════════ */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-slower: 500ms ease; --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-in: cubic-bezier(0.4, 0, 1, 1); --easing-out: cubic-bezier(0, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* ═══════════════════════════════════════════════════════════════════════════ Z-INDEX SCALE ═══════════════════════════════════════════════════════════════════════════ */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; --z-max: 9999; /* ═══════════════════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════════════════ */ --sidebar-width: 240px; --sidebar-collapsed-width: 72px; --header-height: 64px; --content-max-width: 1200px; --content-padding: var(--space-6); /* ═══════════════════════════════════════════════════════════════════════════ FOCUS STYLES ═══════════════════════════════════════════════════════════════════════════ */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--color-accent); --focus-ring: 0 0 0 var(--focus-ring-offset) var(--color-bg-base), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color); } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --color-bg-base: #f5f7fa; --color-bg-elevated: #ffffff; --color-bg-surface: #ffffff; --color-bg-muted: #e8ecf1; --color-bg-hover: #dfe4ea; --color-bg-active: #d1d8e0; --color-glass: rgba(255, 255, 255, 0.8); --color-glass-hover: rgba(255, 255, 255, 0.9); --color-glass-heavy: rgba(255, 255, 255, 0.95); --color-overlay: rgba(0, 0, 0, 0.4); --color-overlay-heavy: rgba(0, 0, 0, 0.6); --color-border: rgba(0, 0, 0, 0.1); --color-border-light: rgba(0, 0, 0, 0.06); --color-border-strong: rgba(0, 0, 0, 0.15); --color-text-primary: #1a1a2e; --color-text-secondary: rgba(26, 26, 46, 0.75); --color-text-muted: rgba(26, 26, 46, 0.55); --color-text-disabled: rgba(26, 26, 46, 0.35); --color-accent: #4f46e5; --color-accent-hover: #6366f1; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.18); --shadow-accent: 0 8px 32px rgba(99, 102, 241, 0.2); } /* ═══════════════════════════════════════════════════════════════════════════ REDUCED MOTION ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-slower: 0ms; } }