/* ============================================= FabricAI — Design Tokens / CSS Variables styles/variables.css ============================================= */ :root { /* ─── Color Palette ─────────────────────── */ /* Backgrounds (dark theme) */ --color-bg-base: hsl(240, 14%, 6%); /* #0D0D18 — deepest bg */ --color-bg-surface: hsl(240, 12%, 9%); /* #111120 — cards/panels */ --color-bg-elevated: hsl(240, 10%, 13%); /* #19192E — raised elements */ --color-bg-overlay: hsl(240, 8%, 18%); /* #272742 — hover states */ /* Brand — Violet → Indigo gradient family */ --color-brand-50: hsl(263, 80%, 95%); --color-brand-100: hsl(263, 78%, 88%); --color-brand-200: hsl(263, 75%, 78%); --color-brand-300: hsl(263, 73%, 68%); --color-brand-400: hsl(263, 70%, 58%); --color-brand-500: hsl(263, 67%, 50%); /* primary */ --color-brand-600: hsl(256, 65%, 46%); --color-brand-700: hsl(249, 63%, 42%); /* indigo tint */ --color-brand-800: hsl(245, 60%, 36%); --color-brand-900: hsl(243, 58%, 28%); /* Gradient definitions */ --gradient-brand: linear-gradient(135deg, hsl(263, 70%, 58%) 0%, hsl(243, 65%, 50%) 100%); --gradient-brand-hover: linear-gradient(135deg, hsl(263, 75%, 63%) 0%, hsl(243, 70%, 55%) 100%); --gradient-brand-soft: linear-gradient(135deg, hsl(263, 70%, 58%, 0.15) 0%, hsl(243, 65%, 50%, 0.15) 100%); --gradient-shimmer: linear-gradient(90deg, transparent 0%, hsla(0,0%,100%,0.05) 50%, transparent 100%); --gradient-mesh: radial-gradient(ellipse 80% 60% at 20% 20%, hsl(263, 70%, 20%, 0.3) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 80% 80%, hsl(243, 65%, 18%, 0.25) 0%, transparent 60%), radial-gradient(ellipse 50% 50% at 50% 10%, hsl(200, 60%, 15%, 0.2) 0%, transparent 60%); /* Text colors */ --color-text-primary: hsl(240, 20%, 96%); /* near-white */ --color-text-secondary: hsl(240, 10%, 70%); /* muted */ --color-text-tertiary: hsl(240, 8%, 50%); /* disabled/placeholder */ --color-text-inverse: hsl(240, 14%, 6%); /* on light backgrounds */ --color-text-brand: hsl(263, 80%, 75%); /* brand-colored text */ /* Borders */ --color-border-subtle: hsl(240, 10%, 18%); /* barely visible */ --color-border-default: hsl(240, 10%, 24%); /* standard border */ --color-border-strong: hsl(240, 10%, 35%); /* emphasized border */ --color-border-brand: hsl(263, 60%, 55%); /* brand border */ /* Semantic colors */ --color-success: hsl(155, 65%, 45%); --color-success-soft: hsl(155, 65%, 45%, 0.15); --color-success-border: hsl(155, 65%, 35%); --color-warning: hsl(38, 90%, 55%); --color-warning-soft: hsl(38, 90%, 55%, 0.15); --color-error: hsl(355, 75%, 60%); --color-error-soft: hsl(355, 75%, 60%, 0.15); --color-error-border: hsl(355, 70%, 45%); --color-info: hsl(210, 75%, 60%); --color-info-soft: hsl(210, 75%, 60%, 0.15); /* ─── Glassmorphism ─────────────────────── */ --glass-bg: hsla(240, 12%, 9%, 0.65); --glass-bg-heavy: hsla(240, 12%, 7%, 0.85); --glass-blur: blur(20px); --glass-blur-heavy: blur(40px); --glass-border: 1px solid hsla(240, 20%, 100%, 0.08); --glass-border-hover: 1px solid hsla(240, 20%, 100%, 0.15); /* ─── Typography ────────────────────────── */ --font-sans: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif; --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; /* Font sizes — fluid with clamp() */ --text-xs: clamp(0.65rem, 1.2vw, 0.75rem); --text-sm: clamp(0.8rem, 1.5vw, 0.875rem); --text-base: clamp(0.9rem, 1.8vw, 1rem); --text-md: clamp(1rem, 2vw, 1.125rem); --text-lg: clamp(1.1rem, 2.5vw, 1.25rem); --text-xl: clamp(1.2rem, 3vw, 1.5rem); --text-2xl: clamp(1.4rem, 3.5vw, 2rem); --text-3xl: clamp(1.8rem, 4vw, 2.5rem); --text-4xl: clamp(2rem, 5vw, 3.5rem); /* Font weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold:800; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; /* Letter spacing */ --tracking-tight: -0.03em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; /* ─── Spacing Scale (4px base) ──────────── */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ─── Border Radii ──────────────────────── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-3xl: 40px; --radius-full: 9999px; /* ─── Shadows (elevation system) ────────── */ --shadow-sm: 0 1px 3px hsla(240,14%,4%,0.4), 0 1px 2px hsla(240,14%,4%,0.3); --shadow-md: 0 4px 8px hsla(240,14%,4%,0.4), 0 2px 4px hsla(240,14%,4%,0.3); --shadow-lg: 0 10px 25px hsla(240,14%,4%,0.5), 0 4px 10px hsla(240,14%,4%,0.3); --shadow-xl: 0 20px 50px hsla(240,14%,4%,0.6), 0 8px 20px hsla(240,14%,4%,0.3); /* Colored glow shadows */ --shadow-brand: 0 0 20px hsla(263,70%,58%,0.25), 0 0 60px hsla(263,70%,58%,0.1); --shadow-brand-strong: 0 0 30px hsla(263,70%,58%,0.4), 0 0 80px hsla(263,70%,58%,0.15); --shadow-success: 0 0 20px hsla(155,65%,45%,0.3); --shadow-error: 0 0 20px hsla(355,75%,60%,0.3); /* ─── Transitions ───────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --duration-slowest:800ms; --transition-base: all var(--duration-base) var(--ease-out); --transition-slow: all var(--duration-slow) var(--ease-out); /* ─── Z-Index Scale ─────────────────────── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; /* ─── Layout ────────────────────────────── */ --container-max: 1200px; --container-md: 800px; --container-sm: 600px; --header-height: 70px; --section-gap: var(--space-12); }