✨ enable upstream updates

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;
+}