/* Search - Privacy-Respecting Metasearch Engine * Main stylesheet with Dracula theme (dark) and light theme * Mobile-first responsive design */ /* CSS Variables - Dracula Theme (Dark) - Default */ /* Per AI.md PART 16: Apply theme class to element: theme-light, theme-dark */ :root, html.theme-dark { /* Spacing scale (8px base) - per AI.md PART 16 */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-8: 3rem; /* 48px */ /* Touch target minimum - per AI.md PART 16 (44px) */ --touch-target: 44px; /* Dracula palette colors */ --cyan: #8be9fd; --green: #50fa7b; --orange: #ffb86c; --pink: #ff79c6; --purple: #bd93f9; --red: #ff5555; --yellow: #f1fa8c; /* Theme colors */ --bg-primary: #282a36; --bg-secondary: #44475a; --bg-tertiary: #1e1f29; --text-primary: #f8f8f2; --text-secondary: #6272a4; --text-muted: #6272a4; --accent-primary: #bd93f9; --accent-secondary: #ff79c6; --accent-success: #50fa7b; --accent-warning: #ffb86c; --accent-error: #ff5555; --accent-error-hover: #ff3333; --accent-info: #8be9fd; --border-color: #44475a; --shadow-color: rgba(0, 0, 0, 0.3); --input-bg: #44475a; --input-border: #6272a4; --input-focus: #bd93f9; --link-color: #8be9fd; --link-hover: #bd93f9; /* Contrast colors for icons on colored backgrounds */ --icon-on-dark: #282a36; --icon-on-light: #f8f8f2; } /* Light Theme */ /* Per AI.md PART 16: Apply theme class to element */ html.theme-light { /* Light theme palette colors */ --cyan: #0284c7; --green: #059669; --orange: #d97706; --pink: #db2777; --purple: #7c3aed; --red: #dc2626; --yellow: #ca8a04; /* Theme colors */ --bg-primary: #f8f8f2; --bg-secondary: #ffffff; --bg-tertiary: #e8e8e8; --text-primary: #282a36; --text-secondary: #44475a; --text-muted: #6272a4; --accent-primary: #7c3aed; --accent-secondary: #db2777; --accent-success: #059669; --accent-warning: #d97706; --accent-error: #dc2626; --accent-error-hover: #b91c1c; --accent-info: #0284c7; --border-color: #e5e7eb; --shadow-color: rgba(0, 0, 0, 0.1); --input-bg: #ffffff; --input-border: #d1d5db; --input-focus: #7c3aed; --link-color: #0284c7; --link-hover: #7c3aed; /* Contrast colors for icons on colored backgrounds */ --icon-on-dark: #f8f8f2; --icon-on-light: #282a36; } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Responsive Container (per AI.md PART 17) * >=720px: 90% width with 5% margins * <720px: 98% width with 1% margins */ .container { width: 98%; margin: 0 auto; max-width: 1400px; } /* Tablet+ (>=768px) */ @media (min-width: 768px) { .container { width: 90%; } } /* Base */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--link-hover); text-decoration: underline; }