/* ========================================================================== SEO Engine Design System — CSS Custom Properties (Design Tokens) UI-0001 through UI-0010, UI-0019, UI-0021, UI-0023 ========================================================================== */ :root { /* ----------------------------------------------------------------------- UI-0001: Primary Color Palette ----------------------------------------------------------------------- */ --color-midnight: #0A2540; /* Primary backgrounds, headers, hero sections, authority areas */ --color-electric: #2F80ED; /* Primary CTA buttons, links, highlights, interactive accents */ --color-navy: #081C2E; /* Dark sections, footer, sidebar backgrounds, premium depth */ --color-white: #FFFFFF; /* Text on dark, card backgrounds, clean content sections */ --color-gray: #6B7280; /* Secondary text, borders, subtle/muted elements (WCAG AA compliant 4.6:1) */ --color-charcoal: #111111; /* Body text on light backgrounds */ /* Gray Scale (Tailwind-compatible) */ --color-gray-50: #f8fafc; --color-gray-100: #f1f5f9; --color-gray-200: #e2e8f0; --color-gray-300: #cbd5e1; --color-gray-400: #94a3b8; --color-gray-500: #64748b; --color-gray-600: #475569; --color-gray-700: #334155; --color-gray-800: #1e293b; --color-gray-900: #0f172a; --color-gray-950: #020617; /* ----------------------------------------------------------------------- UI-0002: Extended Palette ----------------------------------------------------------------------- */ --color-electric-hover: #4A9AF5; /* Button hover state, link hover */ --color-electric-light: #E8F1FD; /* Light blue backgrounds, selected states, info backgrounds */ --color-electric-10: rgba(47, 128, 237, 0.10); /* Subtle blue tints, focus rings, glow effects */ --color-electric-20: rgba(47, 128, 237, 0.20); /* Button glow shadow, active indicators */ --color-midnight-light: #0D2F4F; /* Hover states on dark backgrounds */ --color-midnight-lighter: #123A5C; /* Active states on dark backgrounds, card hover on dark */ /* ----------------------------------------------------------------------- UI-0003: Background Variant Tokens ----------------------------------------------------------------------- */ --bg-dark: #0A2540; /* Hero sections, premium sections, dark cards */ --bg-darker: #081C2E; /* Footer, sidebar, deepest backgrounds */ --bg-light: #FFFFFF; /* Default page background, card backgrounds */ --bg-subtle: #F7F8FA; /* Alternating section backgrounds, input backgrounds */ --bg-muted: #EEF1F5; /* Disabled states, skeleton loaders, dividers */ --bg-surface: #FFFFFF; /* Card surfaces, modal surfaces, dropdown surfaces */ --bg-overlay: rgba(8, 28, 46, 0.60); /* Modal backdrop, overlay backgrounds */ /* ----------------------------------------------------------------------- UI-0004: Text Color Tokens ----------------------------------------------------------------------- */ --text-primary: #111111; /* Body text on light backgrounds */ --text-secondary: #4A5568; /* Secondary descriptions, supporting text */ --text-muted: #6B7280; /* Placeholder text, disabled text, timestamps (WCAG AA compliant 4.6:1) */ --text-inverse: #FFFFFF; /* Text on dark backgrounds */ --text-inverse-muted: rgba(255, 255, 255, 0.60); /* Secondary text on dark backgrounds */ --text-link: #2563EB; /* Hyperlinks on light backgrounds (WCAG AA compliant) */ --text-link-decorative: #2F80ED; /* Links in large headings or non-body contexts */ --text-link-hover: #4A9AF5; /* Hyperlink hover state */ /* ----------------------------------------------------------------------- UI-0005: Accent / Brand Supplement Colors Comparison Badge spec: background #EDE9FE, text #7C3AED, same pill sizing as other badges. ----------------------------------------------------------------------- */ --color-purple: #8B5CF6; /* Comparison content type badge, purple accent */ --color-purple-light: #EDE9FE; /* Comparison badge background */ --color-star: #F59E0B; /* Star rating color in testimonials and reviews */ /* ----------------------------------------------------------------------- UI-0006: State Color Tokens ----------------------------------------------------------------------- */ --color-success: #10B981; /* Success messages, positive metrics, verified status */ --color-success-light: #D1FAE5; /* Success background tints */ --color-warning: #F59E0B; /* Warning messages, pending status, attention needed */ --color-warning-light: #FEF3C7; /* Warning background tints */ --color-error: #EF4444; /* Error messages, destructive actions, failed status */ --color-error-light: #FEE2E2; /* Error background tints */ --color-info: #2F80ED; /* Info messages (shares electric accent color) */ --color-info-light: #E8F1FD; /* Info background tints */ /* ----------------------------------------------------------------------- UI-0007: Border Color Tokens ----------------------------------------------------------------------- */ --border-default: #E2E8F0; /* Default borders, card borders on light backgrounds */ --border-muted: #EEF1F5; /* Subtle dividers, table row separators */ --border-strong: #6B7280; /* Emphasized borders, active inputs (WCAG AA compliant) */ --border-focus: #2F80ED; /* Focus state borders */ --border-error: #EF4444; /* Error state borders */ --border-dark: rgba(255, 255, 255, 0.10); /* Borders on dark backgrounds */ --border-dark-strong: rgba(255, 255, 255, 0.20); /* Emphasized borders on dark backgrounds */ /* Color Aliases */ --color-electric-blue: var(--color-electric); --color-navy-dark: var(--color-midnight); /* Semantic Color Aliases (for component compatibility) */ --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-border: var(--border-default); --color-border-light: var(--border-muted); --color-surface: var(--bg-surface); --color-surface-raised: var(--bg-subtle); /* ----------------------------------------------------------------------- UI-0008: Shadow Tokens ----------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.05); --shadow-md: 0 4px 6px -1px rgba(10, 37, 64, 0.07), 0 2px 4px -2px rgba(10, 37, 64, 0.05); --shadow-lg: 0 10px 15px -3px rgba(10, 37, 64, 0.08), 0 4px 6px -4px rgba(10, 37, 64, 0.04); --shadow-xl: 0 20px 25px -5px rgba(10, 37, 64, 0.10), 0 8px 10px -6px rgba(10, 37, 64, 0.05); --shadow-glow: 0 0 20px rgba(47, 128, 237, 0.25); --shadow-glow-lg: 0 0 40px rgba(47, 128, 237, 0.15); --shadow-inner: inset 0 2px 4px rgba(10, 37, 64, 0.06); --shadow-premium: 0 4px 20px rgba(10, 37, 64, 0.08), 0 1px 3px rgba(10, 37, 64, 0.04); --shadow-elevated: 0 12px 40px rgba(10, 37, 64, 0.12), 0 4px 12px rgba(10, 37, 64, 0.06); /* Premium multi-layer shadows */ --shadow-premium-sm: 0 1px 2px rgba(10, 37, 64, 0.04), 0 1px 3px rgba(10, 37, 64, 0.02); --shadow-premium-md: 0 2px 4px rgba(10, 37, 64, 0.04), 0 8px 16px rgba(10, 37, 64, 0.06), 0 1px 0 rgba(10, 37, 64, 0.02); --shadow-premium-lg: 0 4px 8px rgba(10, 37, 64, 0.04), 0 16px 32px -4px rgba(10, 37, 64, 0.08), 0 1px 0 rgba(10, 37, 64, 0.02); --shadow-premium-xl: 0 8px 16px rgba(10, 37, 64, 0.04), 0 24px 48px -8px rgba(10, 37, 64, 0.10), 0 1px 0 rgba(10, 37, 64, 0.02); /* ----------------------------------------------------------------------- UI-0009: Gradient Tokens ----------------------------------------------------------------------- */ --gradient-dark: linear-gradient(180deg, #0A2540 0%, #081C2E 100%); --gradient-dark-radial: radial-gradient(ellipse at 50% 0%, #123A5C 0%, #0A2540 70%); --gradient-card-dark: linear-gradient(135deg, #0D2F4F 0%, #0A2540 100%); --gradient-electric: linear-gradient(135deg, #2F80ED 0%, #1A6ED8 100%); --gradient-skeleton: linear-gradient(90deg, #EEF1F5 25%, #F7F8FA 50%, #EEF1F5 75%); /* ----------------------------------------------------------------------- UI-0010: Font Family Tokens ----------------------------------------------------------------------- */ --font-display: 'Space Grotesk', 'Montserrat', system-ui, -apple-system, sans-serif; --font-body: 'Inter', 'Open Sans', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* Legacy aliases for backward compatibility */ --font-sans: var(--font-body); /* Font Weight Tokens */ --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Typography Size Tokens */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ----------------------------------------------------------------------- UI-0019: Spacing Scale Tokens (4px base unit) ----------------------------------------------------------------------- */ --space-0: 0px; /* Reset */ --space-1: 4px; /* Tight inline spacing, icon-to-text gap */ --space-2: 8px; /* Compact element spacing, badge padding */ --space-3: 12px; /* Small component padding, form field gap */ --space-4: 16px; /* Standard component padding, paragraph spacing */ --space-5: 20px; /* Card padding (small), nav item spacing */ --space-6: 24px; /* Standard card padding, section sub-padding */ --space-8: 32px; /* Large card padding, content block spacing */ --space-10: 40px; /* Section padding (mobile), dashboard gaps */ --space-12: 48px; /* Section padding (tablet) */ --space-16: 64px; /* Section padding (desktop, small) */ --space-20: 80px; /* Section padding (desktop, standard) */ --space-24: 96px; /* Section padding (desktop, large) */ --space-32: 128px; /* Hero section padding, major vertical spacing */ /* ----------------------------------------------------------------------- UI-0021: Container Width Tokens ----------------------------------------------------------------------- */ --container-xs: 512px; /* 32rem — Centered forms, login pages */ --container-sm: 640px; /* 40rem — Narrow content, blog article body */ --container-md: 768px; /* 48rem — Medium content layouts */ --container-lg: 1024px; /* 64rem — Standard content area */ --container-xl: 1280px; /* 80rem — Wide layouts, dashboard content */ --container-2xl: 1440px; /* 90rem — Maximum marketing site width */ /* ----------------------------------------------------------------------- UI-0023: Component Gap Standards ----------------------------------------------------------------------- */ --gap-icon-text: var(--space-2); /* 8px — Icon + Text (inline) */ --gap-form-fields: var(--space-4); /* 16px — Form Fields (stacked) */ --gap-card-grid: var(--space-6); /* 24px — Card Grid */ --gap-feature-grid: var(--space-8); /* 32px — Feature Grid */ --gap-section: var(--space-6); /* 24px — Section Sub-blocks */ --gap-nav-items: var(--space-8); /* 32px — Navigation Items */ --gap-stat-cards: var(--space-6); /* 24px — Dashboard Stat Cards */ --gap-sidebar-nav: var(--space-1); /* 4px — Sidebar Nav Items */ /* ----------------------------------------------------------------------- Border Radius Tokens (preserved from bootstrap) ----------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* ----------------------------------------------------------------------- Z-Index Tokens (preserved from bootstrap) ----------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 20; --z-sticky: 30; --z-nav: 50; --z-overlay: 60; --z-modal: 70; --z-toast: 100; /* ----------------------------------------------------------------------- Icon Size Tokens (preserved from bootstrap) ----------------------------------------------------------------------- */ --icon-xs: 16px; --icon-sm: 20px; --icon-md: 24px; --icon-lg: 32px; --icon-xl: 48px; --icon-2xl: 64px; /* ----------------------------------------------------------------------- Easing Tokens (preserved from bootstrap) ----------------------------------------------------------------------- */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ----------------------------------------------------------------------- Duration Tokens (preserved from bootstrap) ----------------------------------------------------------------------- */ --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; --duration-200: 200ms; /* ----------------------------------------------------------------------- Layout Tokens (preserved from bootstrap) ----------------------------------------------------------------------- */ --nav-height: 80px; --topbar-height: 64px; --sidebar-expanded: 280px; --sidebar-collapsed: 72px; --container-max: 1200px; --container-wide: var(--container-2xl); } /* ========================================================================== UI-1053: Accessibility — Reduced Motion Media Query Globally disables animations and transitions for users who prefer reduced motion, per WCAG 2.1 Success Criterion 2.3.3. ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }