/** * variables.css * ───────────────────────────────────────────────────────────── * PURPOSE: Central design token hub for PadmajaAI v2.6 * All colors, typography, spacing, and animation * values are defined here so that every other CSS file * references tokens, never hard-coded values. * * CUSTOMIZATION: Change values here and the entire site updates. * * LOGIC: CSS custom properties cascade from :root (light mode) * and are overridden by [data-theme="dark"] for dark mode. * ───────────────────────────────────────────────────────────── */ /* ── LIGHT MODE (default) ─────────────────────────────────── */ :root { /* Brand Colors */ --color-primary: #8B5CF6; /* Violet – main brand */ --color-primary-dark: #7C3AED; /* Deeper violet for hover */ --color-secondary: #A78BFA; /* Lighter violet */ --color-accent: #C4B5FD; /* Soft lavender accent */ --color-accent-glow: rgba(139, 92, 246, 0.35); /* Semantic Surface Colors */ --color-bg: #F1F5F9; /* Light background */ --color-surface: #FFFFFF; /* Card / panel surface */ --color-surface-2: #F8FAFC; /* Slightly elevated */ --color-border: rgba(139, 92, 246, 0.18); --color-border-solid: #E2E8F0; /* Text Colors */ --color-text: #0F172A; /* Primary text */ --color-text-muted: #64748B; /* Secondary text */ --color-text-faint: #94A3B8; /* Disabled / placeholder */ --color-text-inverse: #F8FAFC; /* White text on dark bg */ /* Status Colors */ --color-success: #10B981; --color-warning: #F59E0B; --color-error: #EF4444; --color-info: #3B82F6; /* Gradient Definitions */ --gradient-primary: linear-gradient(135deg, #8B5CF6, #A78BFA); --gradient-hero: linear-gradient(135deg, #F1F5F9 0%, #EDE9FE 50%, #F1F5F9 100%); --gradient-card: linear-gradient(145deg, rgba(139,92,246,0.05), rgba(167,139,250,0.08)); --gradient-glow: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.15), transparent 70%); --gradient-neural: radial-gradient(circle at 20% 80%, rgba(139,92,246,0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(167,139,250,0.06) 0%, transparent 50%); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.05); --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04); --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04); --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.25); --shadow-card: 0 4px 20px rgba(139, 92, 246, 0.08); /* Typography */ --font-primary: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; --font-display: 'Inter', sans-serif; /* Font Sizes – fluid type scale */ --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 */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-black: 900; /* Spacing Scale */ --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; /* Border Radius */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1); /* Z-index stack */ --z-base: 1; --z-card: 10; --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-overlay: 400; --z-toast: 500; /* Layout */ --container-max: 1280px; --container-wide: 1440px; --section-py: var(--space-24); --navbar-h: 70px; /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.75); --glass-border: rgba(255, 255, 255, 0.5); --glass-blur: blur(16px); /* Particle / Node colors */ --node-color-1: rgba(139, 92, 246, 0.6); --node-color-2: rgba(167, 139, 250, 0.4); --node-color-3: rgba(196, 181, 253, 0.3); } /* ── DARK MODE ────────────────────────────────────────────── */ [data-theme="dark"] { /* Brand stays the same – only surfaces/text change */ /* Semantic Surface Colors */ --color-bg: #0F172A; /* Deep navy background */ --color-surface: #1E293B; /* Card surface */ --color-surface-2: #263349; /* Elevated surface */ --color-border: rgba(139, 92, 246, 0.22); --color-border-solid: #334155; /* Text Colors */ --color-text: #F8FAFC; --color-text-muted: #94A3B8; --color-text-faint: #64748B; --color-text-inverse: #0F172A; /* Gradients */ --gradient-hero: linear-gradient(135deg, #0F172A 0%, #1a1040 50%, #0F172A 100%); --gradient-card: linear-gradient(145deg, rgba(139,92,246,0.08), rgba(167,139,250,0.05)); --gradient-glow: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.2), transparent 70%); --gradient-neural:radial-gradient(circle at 20% 80%, rgba(139,92,246,0.12) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(167,139,250,0.08) 0%, transparent 50%); /* Shadows (stronger for dark) */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4); --shadow-lg: 0 10px 15px rgba(0,0,0,0.5); --shadow-xl: 0 20px 25px rgba(0,0,0,0.6); --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.35); --shadow-card: 0 4px 20px rgba(139, 92, 246, 0.12); /* Glassmorphism */ --glass-bg: rgba(30, 41, 59, 0.8); --glass-border: rgba(139, 92, 246, 0.2); /* Particle colors (brighter in dark) */ --node-color-1: rgba(139, 92, 246, 0.8); --node-color-2: rgba(167, 139, 250, 0.6); --node-color-3: rgba(196, 181, 253, 0.4); }