/* CSS Reset and Box Sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Custom Properties */
:root {
    /* Primary Colors */
    --color-primary: #0d2b1d;
    --color-secondary: #1a4530;
    --color-accent: #2d5a40;
    --color-bg: #e8f2ed;
    --color-light: #f5f1e8;
    --color-white: #ffffff;
    
    /* Text Colors */
    --color-text-primary: #0d2b1d;
    --color-text-secondary: #2d5a40;
    
    /* Border Colors */
    --color-border: #0d2b1d;
    --color-border-dark: #082017;
    
    /* Background Colors */
    --color-background: #e8f2ed;
    --color-surface: #ffffff;
    
    /* Map Colors */
    --color-map-bg-start: #d4e8dc;
    --color-map-bg-end: #c2ddc9;
    --color-map-stroke: #1a4530;
    --color-map-hover: rgba(13, 43, 29, 0.2);
    --color-map-selected: rgba(13, 43, 29, 0.3);
    
    /* Puzzle Piece Colors - Original */
    --color-puzzle-intro: #5a8db0;
    --color-puzzle-verse: #7da3c6;
    --color-puzzle-chorus: #4a7694;
    --color-puzzle-bridge: #95b8d1;
    --color-puzzle-outro: #6b9ab8;
    
    /* Puzzle Piece Colors - Muted Variations */
    --color-puzzle-1: #3d6b52;
    --color-puzzle-2: #5a7a68;
    --color-puzzle-3: #4a6d5c;
    --color-puzzle-4: #7d9985;
    --color-puzzle-5: #567362;
    --color-puzzle-6: #6b8277;
    --color-puzzle-7: #4d7360;
    --color-puzzle-8: #647970;
    --color-puzzle-9: #556b5e;
    --color-puzzle-10: #6e8276;
    --color-puzzle-11: #8a9d8f;
    --color-puzzle-12: #5b7569;
    --color-puzzle-13: #4e6f5f;
    --color-puzzle-14: #738b7e;
    --color-puzzle-15: #698278;
    
    /* Puzzle Container Background */
    --color-puzzle-bg: #d4e8f0;
    
    /* Status Colors */
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-error: #c53030;
    
    /* Hover/Interaction Colors */
    --color-hover-overlay: rgba(245, 241, 232, 0.1);
    --color-drag-over: rgba(13, 43, 29, 0.1);
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Typography */
    --font-family-primary: Georgia, 'Times New Roman', serif;
    --font-family-display: 'Brush Script MT', 'Lucida Handwriting', cursive;
    --font-size-base: 1rem;
    --font-size-sm: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;
    
    /* Borders */
    --border-width: 3px;
    --border-width-thin: 2px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-full: 50%;
    
    /* Transitions */
    --transition-speed: 0.3s;
    --transition-ease: ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Body and Global Styles */
body {
    font-family: var(--font-family-primary);
    background: var(--color-bg);
    min-height: 100vh;
    color: var(--color-primary);
    position: relative;
}

/* Background Pattern Overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    pointer-events: none;
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 20px, var(--color-primary) 20px, var(--color-primary) 21px),
        repeating-linear-gradient(-45deg, transparent, transparent 20px, var(--color-primary) 20px, var(--color-primary) 21px);
    z-index: 0;
}