✨ enable upstream updates

static/css/style.css

@@ -1,55 +1,13 @@
-/* CSS Variables for easy customization */
-:root {
-    /* Colors */
-    --color-primary: #000;
-    --color-background: #fff;
-    --color-text: #000;
-    --color-text-muted: #666;
-    --color-disabled: #999;
-    --color-hover-bg: #f0f0f0;
+/* ============================================================
+   SUNDAY COMICS - CORE STYLES
+   ============================================================
 
-    /* Typography */
-    --font-family: 'Courier New', Courier, monospace;
-    --font-size-base: 1rem;
-    --font-size-xs: 0.7rem;
-    --font-size-sm: 0.75rem;
-    --font-size-md: 0.85rem;
-    --font-size-lg: 0.9rem;
-    --font-size-xl: 1.2rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-3xl: 2rem;
-    --font-size-4xl: 6rem;
-    --line-height-base: 1.5;
-    --line-height-tight: 1.3;
-    --line-height-relaxed: 1.6;
-    --letter-spacing-tight: 1px;
-    --letter-spacing-wide: 2px;
+   This file contains the framework CSS that references variables
+   defined in variables.css. When updating from upstream, this file
+   may change, but your customizations in variables.css will be preserved.
 
-    /* Spacing */
-    --space-xs: 0.25rem;
-    --space-sm: 0.5rem;
-    --space-md: 1rem;
-    --space-lg: 1.5rem;
-    --space-xl: 2rem;
-    --space-2xl: 3rem;
-    --space-3xl: 4rem;
-
-    /* Borders */
-    --border-width-thin: 2px;
-    --border-width-thick: 3px;
-    --border-color: var(--color-primary);
-    --border-radius: 0; /* Can be changed for rounded corners */
-
-    /* Layout */
-    --container-max-width: 900px;
-    --content-max-width: 700px;
-    --archive-grid-min: 180px;
-    --archive-grid-min-mobile: 140px;
-    --archive-thumbnail-height: 120px;
-
-    /* Transitions (for future enhancements) */
-    --transition-speed: 0.2s;
-}
+   Do not edit this file directly for design changes - use variables.css instead.
+   ============================================================ */
 
 /* Reset and base styles */
 * {

static/css/variables.css

@@ -0,0 +1,80 @@
+/* ============================================================
+   CSS VARIABLES FOR CUSTOMIZATION
+   ============================================================
+
+   This file contains all customizable design tokens for your webcomic.
+   Edit these values to change colors, fonts, spacing, and layout dimensions.
+
+   The main style.css file references these variables, so you can update
+   your design without touching the core framework styles.
+   ============================================================ */
+
+:root {
+    /* ========================================
+       COLORS
+       ======================================== */
+
+    --color-primary: #000;
+    --color-background: #fff;
+    --color-text: #000;
+    --color-text-muted: #666;
+    --color-disabled: #999;
+    --color-hover-bg: #f0f0f0;
+
+    /* ========================================
+       TYPOGRAPHY
+       ======================================== */
+
+    --font-family: 'Courier New', Courier, monospace;
+    --font-size-base: 1rem;
+    --font-size-xs: 0.7rem;
+    --font-size-sm: 0.75rem;
+    --font-size-md: 0.85rem;
+    --font-size-lg: 0.9rem;
+    --font-size-xl: 1.2rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 2rem;
+    --font-size-4xl: 6rem;
+    --line-height-base: 1.5;
+    --line-height-tight: 1.3;
+    --line-height-relaxed: 1.6;
+    --letter-spacing-tight: 1px;
+    --letter-spacing-wide: 2px;
+
+    /* ========================================
+       SPACING
+       ======================================== */
+
+    --space-xs: 0.25rem;
+    --space-sm: 0.5rem;
+    --space-md: 1rem;
+    --space-lg: 1.5rem;
+    --space-xl: 2rem;
+    --space-2xl: 3rem;
+    --space-3xl: 4rem;
+
+    /* ========================================
+       BORDERS
+       ======================================== */
+
+    --border-width-thin: 2px;
+    --border-width-thick: 3px;
+    --border-color: var(--color-primary);
+    --border-radius: 0; /* Can be changed for rounded corners */
+
+    /* ========================================
+       LAYOUT
+       ======================================== */
+
+    --container-max-width: 900px;
+    --content-max-width: 700px;
+    --archive-grid-min: 180px;
+    --archive-grid-min-mobile: 140px;
+    --archive-thumbnail-height: 120px;
+
+    /* ========================================
+       TRANSITIONS
+       ======================================== */
+
+    --transition-speed: 0.2s;
+}