/* ============================== Rishvin Labs v4 Variables Theme: Vercel / Linear Deep Dark Mode ============================== */ :root { /* ─── Core Dark Backgrounds ─────────────────── */ --bg-primary: #000000; --bg-secondary: #0A0A0A; --bg-tertiary: #111111; --surface: #0A0A0A; --surface-hover: #141414; --card-bg: rgba(10, 10, 10, 0.85); /* ─── Glass Layers ──────────────────────────── */ --glass-bg: rgba(0, 0, 0, 0.50); --glass-bg-md: rgba(10, 10, 10, 0.70); --glass-bg-lg: rgba(10, 10, 10, 0.90); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-md: rgba(255, 255, 255, 0.12); /* ─── Text Hierarchy ─────────────────────────── */ --text-primary: #FFFFFF; --text-secondary: #A1A1AA; --text-muted: #52525B; --text-accent: #FFFFFF; /* ─── Accent Palette ─────────────────────────── */ --accent-blue: #2563EB; --accent-violet: #7C3AED; --accent-gold: #B45309; --accent-teal: #0891B2; --accent-green: #059669; /* ─── Gradient Definitions ───────────────────── */ --gradient-primary: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%); --gradient-glow: linear-gradient(135deg, rgba(37,99,235,0.20), rgba(124,58,237,0.20)); --gradient-hero: radial-gradient(ellipse 90% 70% at 50% -15%, rgba(37,99,235,0.25) 0%, rgba(124,58,237,0.15) 45%, transparent 75%); --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%); --gradient-text: linear-gradient(135deg, #FFFFFF 0%, #A1A1AA 100%); --gradient-border: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.05)); --gradient-footer: linear-gradient(90deg, #2563EB, #7C3AED, #2563EB); /* ─── Fallback Aliases ───────────────────────── */ --primary: var(--text-primary); --accent-primary: var(--accent-blue); --accent-purple: var(--accent-violet); --accent-secondary: var(--accent-violet); /* ─── Borders ────────────────────────────────── */ --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --border-accent: rgba(255, 255, 255, 0.30); /* ─── State Colors ───────────────────────────── */ --success: #10B981; --warning: #F59E0B; --error: #EF4444; /* ─── Shadows ────────────────────────────────── */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.40); --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.60); --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.30), 0 8px 40px rgba(0, 0, 0, 0.20); --shadow-card-hover: 0 4px 30px rgba(255,255,255,0.05), 0 16px 60px rgba(0, 0, 0, 0.50); --glow-blue: 0 0 40px rgba(37, 99, 235, 0.40); --glow-violet: 0 0 40px rgba(124, 58, 237, 0.40); --glow-btn: 0 6px 28px rgba(255, 255, 255, 0.15); --glow-btn-hover: 0 10px 40px rgba(255, 255, 255, 0.25); /* ─── Typography System ──────────────────────── */ --font-heading: 'Georgia', serif; --font-body: 'Times New Roman', Times, serif; --font-mono: 'Courier New', Courier, monospace; --font-serif: 'Georgia', serif; /* ─── Typographic Scale ──────────────────────── */ --text-hero: clamp(3.0rem, 5.5vw, 5.5rem); --text-h1: clamp(2.1rem, 3.2vw, 3.4rem); --text-h2: clamp(1.75rem, 2.6vw, 2.75rem); --text-h3: clamp(1.15rem, 1.6vw, 1.5rem); --text-h4: 1.1rem; --text-body: 1.05rem; --text-small: 0.85rem; --text-caption: 0.72rem; /* ─── Font Weights ───────────────────────────── */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ─── Line Heights ───────────────────────────── */ --line-height-tight: 1.05; --line-height-snug: 1.20; --line-height-base: 1.60; --line-height-relaxed: 1.85; /* ─── 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; --space-40: 10rem; --space-section: 130px; /* ─── Border Radius ──────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 9999px; /* ─── Transitions ────────────────────────────── */ --transition-fast: 0.18s ease; --transition-base: 0.3s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1); --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* ─── Z-Index Hierarchy ──────────────────────── */ --z-negative: -1; --z-normal: 1; --z-nav: 100; --z-modal: 1000; --z-loader: 2000; } /* ============================== Light Theme Override ============================== */ [data-theme="light"] { /* Core Backgrounds */ --bg-primary: #FFFFFF; --bg-secondary: #F4F4F5; --bg-tertiary: #E4E4E7; --surface: #FFFFFF; --surface-hover: #FAFAFA; --card-bg: rgba(255, 255, 255, 0.85); /* Glass Layers */ --glass-bg: rgba(255, 255, 255, 0.70); --glass-bg-md: rgba(255, 255, 255, 0.80); --glass-bg-lg: rgba(255, 255, 255, 0.95); --glass-border: rgba(0, 0, 0, 0.08); --glass-border-md: rgba(0, 0, 0, 0.12); /* Text Hierarchy */ --text-primary: #09090B; --text-secondary: #52525B; --text-muted: #A1A1AA; --text-accent: #09090B; /* Gradient Definitions */ --gradient-card: linear-gradient(135deg, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 100%); --gradient-text: linear-gradient(135deg, #09090B 0%, #52525B 100%); --gradient-border: linear-gradient(135deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05)); /* Borders */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.15); --border-accent: rgba(0, 0, 0, 0.30); /* Shadows */ --shadow: 0 4px 24px rgba(0, 0, 0, 0.05); --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.12); --shadow-card: 0 2px 20px rgba(0, 0, 0, 0.04), 0 8px 40px rgba(0, 0, 0, 0.02); --shadow-card-hover: 0 4px 30px rgba(0,0,0,0.05), 0 16px 60px rgba(0, 0, 0, 0.10); --glow-btn: 0 6px 28px rgba(0, 0, 0, 0.10); --glow-btn-hover: 0 10px 40px rgba(0, 0, 0, 0.15); }