/* ========================================================================== AtlasKeys — Design Tokens Premium dark theme with purple glow. Single source of truth for the UI. Style: OLED-friendly dark + restrained purple neon accents. ========================================================================== */ :root { /* ----- Brand / Accent (Purple) ----- */ --color-primary: #7C3AED; --color-primary-700: #6D28D9; --color-primary-600: #7C3AED; --color-primary-500: #8B5CF6; --color-primary-400: #9F67FF; --color-primary-300: #B794FF; --color-primary-soft: rgba(124, 58, 237, 0.16); --color-primary-glow: rgba(124, 58, 237, 0.45); /* ----- Surfaces (dark, slight cool/purple cast) ----- */ --color-bg: #0A0A12; /* page background */ --color-bg-elev: #101019; /* slightly raised sections */ --color-surface: #15161F; /* cards */ --color-surface-2: #1C1D29; /* nested / hover cards */ --color-surface-3: rgba(36, 38, 52, 0.58); /* glass overlays */ /* ----- Borders / dividers ----- */ --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.14); --color-border-primary: rgba(124, 58, 237, 0.40); /* ----- Text ----- */ --color-text: #F3F3F8; --color-text-muted: #A6A7B8; --color-text-dim: #6E6F82; --color-text-on-accent: #FFFFFF; /* ----- Semantic ----- */ --color-success: #22C55E; --color-success-soft: rgba(34, 197, 94, 0.14); --color-warning: #F59E0B; --color-warning-soft: rgba(245, 158, 11, 0.14); --color-danger: #F2545B; --color-danger-soft: rgba(242, 84, 91, 0.14); --color-info: #38BDF8; --color-info-soft: rgba(56, 189, 248, 0.14); /* ----- Gradients ----- */ --grad-primary: linear-gradient(135deg, #7C3AED 0%, #9F67FF 100%); --grad-primary-2: linear-gradient(135deg, #6D28D9 0%, #A855F7 60%, #C084FC 100%); --grad-surface: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0)); --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(124,58,237,0.20), transparent 70%); /* ----- Typography ----- */ --font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace; /* Fluid type scale */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); --fs-3xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem); --fs-4xl: clamp(2rem, 1.5rem + 2.2vw, 2.875rem); --fs-hero: clamp(2.5rem, 1.6rem + 4.2vw, 4.25rem); --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.6; --lh-loose: 1.75; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ----- Spacing scale (4px base) ----- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* ----- Radius ----- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 30px; --radius-pill: 999px; /* ----- Shadows + glow ----- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 6px 18px rgba(0,0,0,0.35); --shadow-lg: 0 18px 40px rgba(0,0,0,0.45); --shadow-xl: 0 30px 70px rgba(0,0,0,0.55); --shadow-glow: 0 0 0 1px rgba(124,58,237,0.35), 0 8px 30px rgba(124,58,237,0.30); --shadow-focus: 0 0 0 3px rgba(124,58,237,0.45); /* ----- Layout ----- */ --container: 1200px; --container-wide: 1400px; --container-narrow: 760px; --nav-h: 68px; --page-gutter: clamp(1rem, 4vw, 2.5rem); /* ----- Motion ----- */ --t-fast: 140ms; --t-base: 220ms; --t-slow: 340ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ----- Z-index scale ----- */ --z-base: 1; --z-raised: 10; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-backdrop: 1040; --z-modal: 1050; --z-toast: 1080; } /* ========================================================================== LIGHT THEME — overrides applied when . Only color/shadow tokens change; every component reads var(--color-*), so the whole UI re-themes from here. Dark stays the default (:root above). ========================================================================== */ :root { color-scheme: dark; } [data-theme="light"] { color-scheme: light; /* Surfaces */ --color-bg: #F6F7FB; --color-bg-elev: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #EEF0F6; --color-surface-3: rgba(15, 17, 30, 0.04); /* Borders */ --color-border: rgba(15, 17, 30, 0.10); --color-border-strong: rgba(15, 17, 30, 0.16); /* Text */ --color-text: #14151F; --color-text-muted: #565870; --color-text-dim: #8A8C9C; /* Accent text needs to be darker to stay readable on light surfaces */ --color-primary-300: #6D28D9; --color-primary-400: #7C3AED; --color-primary-soft: rgba(124, 58, 237, 0.10); /* Gradients / glows toned down for light */ --grad-surface: linear-gradient(180deg, rgba(15,17,30,0.03), rgba(15,17,30,0)); --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(124,58,237,0.10), transparent 70%); /* Softer shadows on light */ --shadow-sm: 0 1px 2px rgba(16,24,40,0.06); --shadow-md: 0 6px 18px rgba(16,24,40,0.08); --shadow-lg: 0 18px 40px rgba(16,24,40,0.12); --shadow-xl: 0 30px 70px rgba(16,24,40,0.16); --shadow-glow: 0 0 0 1px rgba(124,58,237,0.25), 0 8px 30px rgba(124,58,237,0.18); --shadow-focus: 0 0 0 3px rgba(124,58,237,0.35); } /* Respect users who prefer less motion: neutralize transitions globally. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0.01ms; --t-base: 0.01ms; --t-slow: 0.01ms; } }