/* Design System Variables - Typewriter Aesthetic */ /* ============================================ Z-INDEX HIERARCHY — OFF-THE-RECORD ============================================ -1 Hidden/inactive overlays 1-10 In-content elements 50 Dropdowns, search results 80-100 Fixed UI (install prompt, continue reading, header, footer, progress) 105 Floating controls 150 Overlay backdrop 200 Sidebar 250-300 Sidebar mobile internals 1000-1001 Media modals, photo modals 5000 Lightbox overlay 5001 Prompt modal 9999 Offline indicator 50000 Password gate 99999 Skip link (accessibility) ============================================ */ /* ============================================ LIGHT MODE (DEFAULT) ============================================ */:root{/* Colors - Minimalist monochromatic palette */ --color-text-primary:#333;--color-text-secondary:#666;--color-text-tertiary:#999;--color-background:#fefefe;--color-background-secondary:#f8f8f8;--color-background-tertiary:#f0f0f0;--color-accent:#333;--color-accent-light:#f5f5f5;--color-border:#ddd;--color-border-subtle:#eee;--color-success:#333;--color-overlay:rgba(51, 51, 51, 0.5);/* Links */ --color-link:#0066cc;--color-link-hover:#0044aa;/* Errors */ --color-error-bg:#ffebee;--color-error-border:#ef5350;--color-error-text:#c62828;/* Accent */ --color-accent-red:#cc0000;/* Search Highlights */ --color-highlight:#ffeb3b;--color-highlight-current:#ff9800;/* Media player */ --color-player-bg:#1a1a1a;--color-player-bar:#444;--color-player-fill:#fff;--color-video-bg:#000;/* Modal specific */ --color-modal-bg:#ffffff;--color-modal-overlay:rgba(0, 0, 0, 0.6);/* Header/Footer/Sidebar */ --color-header-bg:#ffffff;--color-footer-bg:#ffffff;--color-sidebar-bg:#f5f5f5;/* Images */ --color-image-border:transparent;--color-image-bg:transparent;/* Typography - Monospace typewriter style */ --font-mono:'Courier New', Courier, monospace;--font-serif:'EB Garamond', 'Times New Roman', Times, Georgia, serif;--font-sans:'Courier New', Courier, monospace;--font-size-xs:0.8125rem;/* 13px */ --font-size-sm:0.875rem;/* 14px */ --font-size-base:1rem;/* 16px */ --font-size-md:1.125rem;/* 18px */ --font-size-lg:1.375rem;/* 22px */ /* Reader font sizes (user adjustable) - optimized for long-form reading */ --font-size-reader-small:1.0625rem;/* 17px - default */ --font-size-reader-medium:1.125rem;/* 18px */ --font-size-reader-large:1.375rem;/* 22px */ --font-size-reader:var(--font-size-reader-small);--font-size-xl:1.75rem;/* 28px */ --font-size-2xl:2.25rem;/* 36px */ --font-size-3xl:3rem;/* 48px */ --line-height-tight:1.2;--line-height-normal:1.5;--line-height-relaxed:1.6;--letter-spacing-tight:1px;--letter-spacing-normal:2px;--letter-spacing-wide:3px;/* Spacing */ --space-xs:0.25rem;/* 4px */ --space-sm:0.5rem;/* 8px */ --space-md:1rem;/* 16px */ --space-lg:1.25rem;/* 20px */ --space-xl:2rem;/* 32px */ --space-2xl:2.5rem;/* 40px */ --space-3xl:3.75rem;/* 60px */ /* Layout */ --max-width-reader:800px;--padding-mobile:1.25rem;/* 20px */ --padding-tablet:2.5rem;/* 40px */ /* Breakpoints (for reference in media queries) */ --breakpoint-sm:600px;--breakpoint-md:768px;--breakpoint-lg:1024px;/* Shadows - Minimal/none for flat design */ --shadow-sm:none;--shadow-md:0 2px 4px rgba(0, 0, 0, 0.05);--shadow-lg:0 4px 8px rgba(0, 0, 0, 0.08);/* Transitions */ --transition-fast:150ms ease;--transition-normal:300ms ease;--transition-slow:500ms ease;/* Z-index layers */ --z-header:100;--z-nav-footer:90;--z-progress-bar:95;--z-sidebar:200;--z-overlay:150;/* Touch targets */ --min-touch-target:44px;/* Performance - GPU acceleration */ --header-height-desktop:69px;--header-height-mobile:64px;--transition-modal:0.3s cubic-bezier(0.4, 0, 0.2, 1);}/* ============================================ DARK MODE ============================================ */ [data-theme="dark"]{/* Text */ --color-text-primary:#e0e0e0;--color-text-secondary:#aaaaaa;--color-text-tertiary:#777777;/* Backgrounds */ --color-background:#1a1a1a;--color-background-secondary:#242424;--color-background-tertiary:#2e2e2e;--color-accent:#e0e0e0;--color-accent-light:#333333;/* Borders */ --color-border:#444444;--color-border-subtle:#333333;/* Overlay */ --color-overlay:rgba(0, 0, 0, 0.7);/* Links */ --color-link:#6db3f2;--color-link-hover:#9dcbf7;/* Errors */ --color-error-bg:#3d2020;--color-error-border:#ef5350;--color-error-text:#ff8a80;/* Accent (same in dark mode) */ --color-accent-red:#cc0000;/* Search Highlights (same in dark mode) */ --color-highlight:#ffeb3b;--color-highlight-current:#ff9800;/* Media player (stays dark) */ --color-player-bg:#1a1a1a;--color-player-bar:#444;--color-player-fill:#fff;--color-video-bg:#000;/* Modal */ --color-modal-bg:#242424;--color-modal-overlay:rgba(0, 0, 0, 0.85);/* Header/Footer/Sidebar */ --color-header-bg:#1f1f1f;--color-footer-bg:#1f1f1f;--color-sidebar-bg:#222222;/* Images get subtle borders in dark mode */ --color-image-border:#444444;--color-image-bg:#242424;}/* Font size classes (set by user preference) */ body.font-small{--font-size-reader:var(--font-size-reader-small);}body.font-medium{--font-size-reader:var(--font-size-reader-medium);}body.font-large{--font-size-reader:var(--font-size-reader-large);}