/** * MENTOVATE Design Tokens * * Single source of truth for all colors, gradients, typography, spacing, * radii, shadows, easings and z-index scales used across the plugin. * * Loaded as the FIRST dependency of every other stylesheet, so var(--mv-*) * is available everywhere — blog frontend, admin screens, marketing pages, * setup wizard, podcast, AI dashboards, HTML pages module. * * NEVER add component styles or layout rules here — only :root variables. * * @since 5.65.0 */ :root { /* ========================================================================== BRAND COLORS ========================================================================== */ /* Primary backgrounds */ --mv-bg: #06070A; /* Page background — deepest black */ --mv-bg-deep: #06070A; --mv-primary-dark: #06070A; /* Legacy alias — same as --mv-bg */ --mv-bg-dark: #0D0E12; --mv-bg-card: #0D0E12; --mv-bg-card-hover: #1A1B22; --mv-bg-panel: #1A1A1F; /* Gold scale */ --mv-gold-dark: #62451E; --mv-gold: #AB936D; /* Primary gold (brand) */ --mv-gold-light: #AB936D; --mv-gold-bright: #C9A96E; /* Deep brown — for text on gold backgrounds (WCAG AA: ~7:1 contrast) */ --mv-brown-deep: #1a1208; /* Text */ --mv-text: #F0EDE8; --mv-text-white: #F0EDE8; --mv-text-light: #F0EDE8; --mv-text-cream: #F5F1EB; --mv-text-gold: #AB936D; --mv-text-muted: #8A8A95; /* Status colors */ --mv-success: #4ADE80; --mv-warning: #F59E0B; --mv-danger: #EF4444; --mv-info: #38BDF8; /* ========================================================================== RGB COMPONENTS (for rgba() / alpha compositing) ========================================================================== */ --mv-gold-dark-rgb: 98, 69, 30; --mv-gold-rgb: 171, 147, 109; --mv-gold-primary-rgb: 171, 147, 109; --mv-gold-bright-rgb: 201, 169, 110; --mv-black-rgb: 0, 0, 0; --mv-white-rgb: 255, 255, 255; --mv-bg-deep-rgb: 6, 7, 10; --mv-bg-dark-rgb: 13, 14, 18; --mv-bg-brown-rgb: 51, 33, 9; --mv-bg-card-rgb: 20, 21, 23; --mv-bg-panel-rgb: 26, 26, 31; --mv-text-muted-rgb: 186, 186, 186; --mv-text-cream-rgb: 245, 241, 235; /* ========================================================================== BORDERS ========================================================================== */ --mv-bg-highlight: rgba(var(--mv-gold-dark-rgb), 0.15); --mv-bg-border: rgba(var(--mv-gold-primary-rgb), 0.12); --mv-bg-border-active: rgba(var(--mv-gold-primary-rgb), 0.30); --mv-border-thin: 1px solid rgba(var(--mv-gold-primary-rgb), 0.18); --mv-border-medium: 1px solid rgba(var(--mv-gold-primary-rgb), 0.30); /* ========================================================================== GRADIENTS ========================================================================== */ --mv-gradient-gold: linear-gradient(202deg, #62451E, #AB936D); /* Button-Gradient: helles Gold → Brand-Gold. Dunkler Text (var(--mv-brown-deep)) gibt WCAG-AA-Kontrast (5:1) und macht CTAs auf dunklen Pages prominent sichtbar ohne "verblasst" zu wirken. */ --mv-gradient-button: linear-gradient(135deg, #E8C589, #C9A96E); --mv-gradient-text: linear-gradient(202deg, #62451E, #AB936D, #C9A96E); --mv-gradient-section: linear-gradient(to bottom, #06070A 0%, rgba(var(--mv-bg-dark-rgb), 0.95) 10%, rgba(var(--mv-bg-brown-rgb), 0.20) 25%, rgba(var(--mv-gold-dark-rgb), 0.08) 40%, rgba(var(--mv-gold-dark-rgb), 0.05) 60%, #06070A 90% ); --mv-gradient-overlay: linear-gradient(180deg, rgba(var(--mv-bg-deep-rgb), 0) 0%, rgba(var(--mv-bg-deep-rgb), 0.85) 70%, rgba(var(--mv-bg-deep-rgb), 1) 100% ); /* ========================================================================== TYPOGRAPHY ========================================================================== */ --mv-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mv-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mv-font-display: 'Bebas Neue', 'Montserrat', sans-serif; --mv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Font sizes (fluid where it matters) */ --mv-fs-xs: 0.75rem; /* 12px */ --mv-fs-sm: 0.875rem; /* 14px */ --mv-fs-base: 1rem; /* 16px */ --mv-fs-md: 1.125rem; /* 18px */ --mv-fs-lg: 1.25rem; /* 20px */ --mv-fs-xl: 1.5rem; /* 24px */ --mv-fs-2xl: clamp(1.75rem, 3vw, 2.25rem); --mv-fs-3xl: clamp(2rem, 4vw, 3rem); --mv-fs-4xl: clamp(2.5rem, 6vw, 4rem); --mv-fs-hero: clamp(2.75rem, 7vw, 5rem); --mv-lh-tight: 1.2; --mv-lh-snug: 1.4; --mv-lh-normal: 1.6; --mv-lh-relaxed: 1.75; --mv-tracking-tight: -0.02em; --mv-tracking-normal: 0; --mv-tracking-wide: 0.05em; --mv-tracking-wider: 0.1em; /* ========================================================================== LAYOUT / SPACING ========================================================================== */ --mv-content-width: 800px; --mv-wide-width: 1100px; --mv-max-width: 1400px; /* Spacing scale (rem-based, 4px steps) */ --mv-space-1: 0.25rem; /* 4px */ --mv-space-2: 0.5rem; /* 8px */ --mv-space-3: 0.75rem; /* 12px */ --mv-space-4: 1rem; /* 16px */ --mv-space-5: 1.25rem; /* 20px */ --mv-space-6: 1.5rem; /* 24px */ --mv-space-8: 2rem; /* 32px */ --mv-space-10: 2.5rem; /* 40px */ --mv-space-12: 3rem; /* 48px */ --mv-space-16: 4rem; /* 64px */ --mv-space-20: 5rem; /* 80px */ --mv-space-24: 6rem; /* 96px */ /* Touch targets (mobile-first: 64px minimum) */ --mv-touch-min: 64px; /* ========================================================================== RADII ========================================================================== */ --mv-radius-sm: 4px; --mv-radius-md: 8px; --mv-radius-lg: 14px; --mv-radius-xl: 20px; --mv-radius-2xl: 28px; --mv-radius-pill: 999px; --mv-radius-full: 50%; /* ========================================================================== SHADOWS ========================================================================== */ --mv-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --mv-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --mv-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --mv-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55); --mv-shadow-glow: 0 0 24px rgba(var(--mv-gold-primary-rgb), 0.35); --mv-shadow-glow-strong: 0 0 36px rgba(var(--mv-gold-primary-rgb), 0.55); --mv-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(var(--mv-gold-primary-rgb), 0.06); /* Bevel for text on gold (WCAG-required for readability) */ --mv-text-shadow-on-gold: 0 1px 0 rgba(255, 255, 255, 0.18); /* ========================================================================== MOTION ========================================================================== */ --mv-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --mv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --mv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --mv-dur-fast: 0.15s; --mv-dur-normal: 0.3s; --mv-dur-slow: 0.6s; --mv-transition: all var(--mv-dur-normal) var(--mv-ease-out); /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --mv-z-base: 1; --mv-z-dropdown: 100; --mv-z-sticky: 500; --mv-z-overlay: 1000; --mv-z-modal: 2000; --mv-z-toast: 3000; --mv-z-cursor: 2147483646; --mv-z-banner: 2147483647; } /* ========================================================================== REDUCED MOTION — globally honored ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --mv-dur-fast: 0.001s; --mv-dur-normal: 0.001s; --mv-dur-slow: 0.001s; } }