/* =================================================================== GrooVVee — Design Tokens Single source of truth for all design decisions. Palette: bright, light theme — blue (primary/info), green (accent/success), yellow (warning), red (error/live) — replacing the earlier dark violet/lime theme. Every consuming file reads these same variable names, so this file is the whole re-theme. =================================================================== */ :root { /* ── Backgrounds (light — no black) ──────────────────────────── */ --bg-base: #F4F7FC; /* Page background — soft blue-white, not stark white */ --bg-surface: #FFFFFF; /* Cards, panels */ --bg-elevated: #FFFFFF; /* Raised elements */ --bg-overlay: #EEF2FA; /* Hover states, overlays */ --bg-scrim: rgba(15, 23, 42, 0.45); /* Modal backdrops */ /* ── Glassmorphism (blue-tinted, since white-on-white would vanish) ── */ --glass-bg: rgba(28, 28, 30, 0.045); --glass-bg-hover: rgba(28, 28, 30, 0.08); --glass-bg-active: rgba(28, 28, 30, 0.12); --glass-border: rgba(15, 23, 42, 0.08); --glass-border-hover: rgba(15, 23, 42, 0.16); --glass-blur: blur(20px); --glass-blur-heavy: blur(40px); /* ── Primary — dark grey, no color right now (was blue) ───────── Renaming these would touch dozens of call sites for no functional gain, so the ramp stays "primary"/"accent" — only the hex values changed. Semantic tokens below (success/error/warning/info) are untouched, so status colors still mean something. ───────────── */ --primary-950: #09090B; --primary-900: #18181B; --primary-800: #27272A; --primary-700: #3F3F46; --primary-600: #52525B; --primary-500: #71717A; /* Main brand */ --primary-400: #A1A1AA; --primary-300: #D4D4D8; --primary-200: #E4E4E7; --primary-100: #F4F4F5; --primary-50: #FAFAFA; /* ── Accent — dark grey, no color right now (was green) ────────── */ --accent-700: #3F3F46; --accent-600: #52525B; --accent-500: #71717A; --accent-400: #A1A1AA; --accent-300: #A1A1AA; /* Main accent */ --accent-200: #D4D4D8; --accent-100: #F4F4F5; /* ── Semantic Colors — yellow (warning), red (error/live), blue (info) ── */ --success-500: #16A34A; --success-400: #22C55E; --success-100: #DCFCE7; --error-500: #DC2626; --error-400: #EF4444; --error-100: #FEE2E2; --warning-500: #CA8A04; --warning-400: #EAB308; --warning-100: #FEF9C3; --info-500: #2563EB; --info-400: #3B82F6; --info-100: #DBEAFE; /* ── Text (dark-on-light) — neutral blackish-grey, not blue-tinted ── */ --text-primary: #1C1C1E; --text-secondary: #48484C; --text-muted: #8A8A8E; --text-disabled: #C7C7CC; --text-inverse: #FFFFFF; --text-accent: #3F3F46; --text-brand: #3F3F46; /* ── Borders ────────────────────────────────────────────────── */ --border-subtle: rgba(15, 23, 42, 0.06); --border-default: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.22); --border-primary: rgba(28, 28, 30, 0.35); --border-accent: rgba(28, 28, 30, 0.35); /* ── Gradients ──────────────────────────────────────────────── */ /* Neutral dark-grey for now, per product direction — functional colors (error/success/warning/live, below) are untouched; this only affects the purely decorative brand gradients. */ --gradient-primary: linear-gradient(135deg, #3F3F46 0%, #18181B 100%); --gradient-accent: linear-gradient(135deg, #71717A 0%, #3F3F46 100%); --gradient-mixed: linear-gradient(135deg, #52525B 0%, #27272A 100%); --gradient-card: linear-gradient(135deg, rgba(28,28,30,0.06) 0%, rgba(28,28,30,0.02) 100%); --gradient-glow-v: radial-gradient(ellipse at center, rgba(28,28,30,0.18) 0%, transparent 70%); --gradient-glow-a: radial-gradient(ellipse at center, rgba(28,28,30,0.12) 0%, transparent 70%); --gradient-surface: linear-gradient(180deg, rgba(15,23,42,0.03) 0%, rgba(15,23,42,0) 100%); /* ── Shadows (soft, light-theme appropriate) ──────────────────── */ --shadow-xs: 0 1px 2px rgba(15,23,42,0.06); --shadow-sm: 0 2px 8px rgba(15,23,42,0.08); --shadow-md: 0 4px 16px rgba(15,23,42,0.10); --shadow-lg: 0 8px 32px rgba(15,23,42,0.12); --shadow-xl: 0 16px 48px rgba(15,23,42,0.16); --shadow-glow-primary: 0 0 20px rgba(28,28,30,0.20), 0 0 40px rgba(28,28,30,0.08); --shadow-glow-accent: 0 0 20px rgba(28,28,30,0.18), 0 0 36px rgba(28,28,30,0.08); --shadow-glow-sm: 0 0 12px rgba(28,28,30,0.14); /* ── 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-7: 1.75rem; /* 28px */ --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-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 36px; --radius-full: 9999px; /* ── Z-Index Ladder ─────────────────────────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 50; --z-dropdown: 100; --z-sidebar: 200; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; --z-top: 999; /* ── Transitions ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-slower: 600ms; --transition-fast: var(--duration-fast) var(--ease-out); --transition-base: var(--duration-base) var(--ease-out); --transition-slow: var(--duration-slow) var(--ease-out); /* ── Layout Dimensions ──────────────────────────────────────── */ --sidebar-width: 240px; --sidebar-collapsed-w: 68px; --topbar-height: 60px; --content-max-width: 1200px; --card-min-width: 280px; --bottom-nav-height: 0px; /* overridden to 56px on mobile — see .bottom-nav in layout.css */ }