/* ============================================================
   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;
}