Implement comprehensive theme system with FontAwesome icons

- Add comprehensive CSS custom properties for all theme colors
- Include modal, button, input, text, and background color variables
- Enhance dark theme with complete variable overrides for proper contrast
- Replace hardcoded colors in print-preview.css with theme variables
- Add FontAwesome CDN integration and replace emoji icons
- Create minimalistic glass-effect checkbox styling with transparency
- Fix white-on-white text issue in dark theme across all modals

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/print-preview.css

@@ -11,6 +11,45 @@
     margin: 5vh auto;
 }
 
+.print-preview-modal .modal-content {
+    background: var(--modal-background) !important;
+    color: var(--modal-text) !important;
+}
+
+.print-preview-modal .modal-header {
+    background: var(--modal-header-background) !important;
+    border-bottom-color: var(--modal-header-border) !important;
+}
+
+.print-preview-modal .modal-header h3 {
+    color: var(--modal-text) !important;
+}
+
+.print-preview-modal .modal-body {
+    background: var(--modal-background) !important;
+}
+
+.print-preview-modal .modal-close {
+    color: var(--modal-text) !important;
+    background: transparent !important;
+    border: none !important;
+    font-size: 1.5rem !important;
+    cursor: pointer !important;
+    padding: 0.25rem !important;
+}
+
+.print-preview-modal .modal-close:hover {
+    color: #666 !important;
+}
+
+[data-theme="dark"] .print-preview-modal .modal-close {
+    color: #f3f4f6 !important;
+}
+
+[data-theme="dark"] .print-preview-modal .modal-close:hover {
+    color: #d1d5db !important;
+}
+
 .print-preview-body {
     display: flex;
     gap: 2rem;
@@ -108,12 +147,12 @@
 }
 
 .preview-actions .btn-primary {
-    background: #3B82F6;
+    background: var(--primary-color, #3B82F6);
     color: white;
 }
 
 .preview-actions .btn-primary:hover {
-    background: #2563EB;
+    background: var(--primary-color-hover, #2563EB);
 }
 
 .preview-actions .btn-secondary {
@@ -132,7 +171,7 @@
     justify-content: center;
     align-items: flex-start;
     overflow: auto; /* Allow scrolling if paper is larger than container */
-    background: #f5f5f5;
+    background: var(--background-tertiary, #f5f5f5);
     border-radius: 8px;
     padding: 2rem;
     cursor: grab;
@@ -178,8 +217,8 @@
 .print-preview-paper .week-day-header.today,
 .print-preview-paper .week-day-column.today {
     background-color: transparent !important;
-    border-color: #ddd !important;
-    color: #333 !important;
+    border-color: var(--border-color, #ddd) !important;
+    color: var(--text-color, #333) !important;
     font-weight: normal !important;
 }
 
@@ -320,7 +359,7 @@
     height: calc(var(--print-pixels-per-hour) * 1px) !important;
     min-height: calc(var(--print-pixels-per-hour) * 1px) !important;
     max-height: calc(var(--print-pixels-per-hour) * 1px) !important;
-    border-bottom: 1px solid #ddd !important;
+    border-bottom: 1px solid var(--border-color, #ddd) !important;
     overflow: visible !important;
 }
 
@@ -360,7 +399,7 @@
     height: calc(var(--print-base-unit) * 1px) !important;
     min-height: calc(var(--print-base-unit) * 1px) !important;
     max-height: calc(var(--print-base-unit) * 1px) !important;
-    border-bottom: 1px dotted #ddd !important;
+    border-bottom: 1px dotted var(--border-color-light, #ddd) !important;
     overflow: visible !important;
 }
 
@@ -372,7 +411,7 @@
     height: calc(var(--print-base-unit) * 1px) !important;
     min-height: calc(var(--print-base-unit) * 1px) !important;
     max-height: calc(var(--print-base-unit) * 1px) !important;
-    border-bottom: 1px dotted #eee !important;
+    border-bottom: 1px dotted var(--border-color-lighter, #eee) !important;
     overflow: visible !important;
 }
 
@@ -1130,8 +1169,8 @@
 
 /* Print Page Setup - Force landscape orientation and fit to page */
 @page {
-    size: landscape;
-    margin: 0.5in;
+    size: letter landscape;
+    margin: 0.25in;
 }
 
 /* Print Media Rules - Show only the print-preview-copy when printing */
@@ -1154,7 +1193,7 @@
         top: 0 !important;
         /* width: 960px !important; */
         /* height: 720px !important; */
-        aspect-ratio: 1.2941176470588236 !important;
+        aspect-ratio: 1.3125 !important;
         margin: 0 !important;
         padding: 0 !important;
         box-sizing: border-box !important;