/* ==========================================
   Pixel Art Design System - CSS Variables
   棉雲/WTGM Official Site
   Based on Artist's Original Style
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Press+Start+2P&display=swap');

:root {
    /* ===== Colors (Based on Artist's Palette) ===== */

    /* Primary Colors - Dark Navy Base */
    --color-primary: #1a1d2e;
    --color-primary-light: #2d3142;
    --color-primary-dark: #0f1119;

    /* Secondary Colors - Grayish Blue */
    --color-secondary: #4f5d75;
    --color-secondary-light: #6b7a8f;
    --color-secondary-dark: #3a4556;

    /* Accent Colors - Muted Tones */
    --color-accent-gray: #a7a2a9;
    --color-accent-beige: #f7d1ba;
    --color-accent-purple: #8b8a9e;
    --color-accent-blue: #7a8ba3;

    /* Background Colors */
    --color-bg-dark: #0f1119;
    --color-bg-darker: #080a0f;
    --color-bg-card: #1a1d2e;
    --color-bg-card-hover: #2d3142;

    /* Pixel Border Colors */
    --color-border-dark: #4f5d75;
    --color-border-light: #6b7a8f;
    --color-border-accent: #a7a2a9;

    /* Text Colors */
    --color-text-primary: #f7f7f7;
    --color-text-secondary: #a7a2a9;
    --color-text-tertiary: #6b7a8f;
    --color-text-muted: #4f5d75;

    /* ===== Typography ===== */

    /* Font Families */
    --font-pixel-ja: 'DotGothic16', monospace;
    --font-pixel-en: 'Press Start 2P', monospace;
    --font-fallback: monospace;

    /* Font Sizes - Pixel Perfect */
    --font-size-xs: 8px;
    --font-size-sm: 12px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 48px;

    /* Line Heights - Pixel Grid Aligned */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 2.0;

    /* ===== Spacing - 8px Grid System ===== */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --space-12: 96px;
    --space-16: 128px;

    /* ===== Border - Pixel Style ===== */
    --border-width: 2px;
    --border-width-thick: 4px;
    --border-style: solid;

    /* No Border Radius - Sharp Pixel Edges */
    --radius-none: 0;

    /* ===== Pixel Shadows ===== */
    --shadow-pixel-sm: 4px 4px 0 rgba(0, 0, 0, 0.3);
    --shadow-pixel-md: 6px 6px 0 rgba(0, 0, 0, 0.3);
    --shadow-pixel-lg: 8px 8px 0 rgba(0, 0, 0, 0.4);

    /* ===== Transitions ===== */
    --transition-fast: 100ms steps(4);
    --transition-base: 200ms steps(6);
    --transition-slow: 300ms steps(8);

    /* ===== Z-Index ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ===== Pixel Patterns ===== */
    --pattern-dots: repeating-linear-gradient(0deg,
            transparent,
            transparent 2px,
            var(--color-border-dark) 2px,
            var(--color-border-dark) 4px);

    --pattern-grid:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 7px,
            var(--color-border-dark) 7px,
            var(--color-border-dark) 8px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 7px,
            var(--color-border-dark) 7px,
            var(--color-border-dark) 8px);
}

/* ===== Base Styles ===== */

body {
    background: var(--color-bg-dark);
    color: var(--color-text-primary);
    font-family: var(--font-pixel-ja);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* ===== Utility Classes ===== */

/* Pixel Border */
.pixel-border {
    border: var(--border-width) var(--border-style) var(--color-border-light);
    border-radius: var(--radius-none);
}

.pixel-border-thick {
    border: var(--border-width-thick) var(--border-style) var(--color-border-light);
    border-radius: var(--radius-none);
}

/* Pixel Frame - Decorative Corner Elements */
.pixel-frame {
    position: relative;
    padding: var(--space-4);
}

.pixel-frame::before,
.pixel-frame::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: var(--border-width) var(--border-style) var(--color-border-accent);
}

.pixel-frame::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.pixel-frame::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Pixel Shadow */
.pixel-shadow-sm {
    box-shadow: var(--shadow-pixel-sm);
}

.pixel-shadow-md {
    box-shadow: var(--shadow-pixel-md);
}

.pixel-shadow-lg {
    box-shadow: var(--shadow-pixel-lg);
}

/* Text Colors */
.text-primary {
    color: var(--color-text-primary);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-tertiary {
    color: var(--color-text-tertiary);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-accent {
    color: var(--color-accent-beige);
}

/* Pixel Font Classes */
.font-pixel-ja {
    font-family: var(--font-pixel-ja);
}

.font-pixel-en {
    font-family: var(--font-pixel-en);
}

/* Pixel Pattern Backgrounds */
.bg-pattern-dots {
    background-image: var(--pattern-dots);
}

.bg-pattern-grid {
    background-image: var(--pattern-grid);
}

/* Pixel Animation */
@keyframes pixelFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pixelBlink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.pixel-fade-in {
    animation: pixelFadeIn var(--transition-base) forwards;
}

.pixel-blink {
    animation: pixelBlink 1s steps(2) infinite;
}