/**
 * Turdle Memory Game - Main CSS
 * Base styles and imports for all modules!

                                                         -@@@@@.                
                                                      @::::   :.::@             
                                                    @@@@@@::::::::::@ @@@         
                        @:++++@@                  @    .   @:::::::::@   @      
                         =:-****#@               @  @@   @  @::::::::@  @ @     
                         +*****##@@@@           @@ .@@@ =@@..::::::::-@@@=.     
                        @##***##@**.*#@         ++..@@@@@@@.@:--------@@@.@     
                      @+:*@@@@@#*:****@         ::@..@@@@..@----@--:---::@      
                     @*******#@#*****%@*@@      @---:@@@@@-------------=@       
                   @@@##****%#@%%%%%%@#***#     *=---===--:@:-------+:==@       
                 @*::*#@####@@@@@@@@#:****%@     @==----------@@@@@---=@        
                @#******@*#:****#@#*****##%@@@@    @===------------==@          
                @##****%%******#%@%%*##%%%@#***#@    @@==========%@@            
             @***@@%%%%%%%%###%%%@@#%%%#@@*:***#%@@@ @++++++++++@               
            @******#@@@@@@%%%%%%@@****@@#*****#%@.:=@@---++++++@                
          @@##******%@*::***#@@@*::****%@%%%%%%#*.:=@--------=+.                
     @@  @..@#%%##%%@*******#%@******##%%@#%%%@...=@@=------==+                 
     @=-@@-...@@#%%%@%%#####%%@%%####%%%@@@@@@:.==@@+------=@                   
      @=--@-=.....@@@@#%%%%%%#@@#%%%%#@@@.....=%%@+++----==@                    
        @===@@@@@@.....@..%@@@@@@@........===-@@@@@@@====@                      
           @:  :::::@--:.......:....:====-@@++----. --@+++*@                    
          @--::------+@@@---===@---.@@@@++++-----------@++++@                   
         %..@------====@==@=====@=======@++=---------@.@=+-=@                   
         %@..========@@ @@@%====@===+@@@  @@@=======@..+@@@=                    


 */

/* ==================== CSS IMPORTS ==================== */
@import url('layout.css');
@import url('components.css');
@import url('modal.css');
@import url('animations.css');
@import url('responsive.css');

/* ==================== CSS CUSTOM PROPERTIES ==================== */
:root {
	/* Colors */
	--color-primary: #228B22;
	--color-primary-light: #32CD32;
	--color-primary-dark: #006400;
	--color-secondary: #8FBC8F;
	--color-accent: #90EE90;
	--color-warning: #D2691E;
	--color-warning-bg: #FFE4B5;
	--color-error: #ff0000;
	--color-success: #28a745;
	--color-success-hover: #218838;
	
	/* Card colors */
	--color-card-front: #f0d9b5;
	--color-card-back: #a88a5c;
	--color-card-border: #a88a5c;
	--color-mask: limegreen;
	--color-slot-border: green;
	
	/* Text colors */
	--color-text-primary: #222;
	--color-text-secondary: #2F4F2F;
	--color-text-light: white;
	--color-text-muted: #666;
	
	/* Background colors */
	--color-bg-primary: #ffffff;
	--color-bg-modal: rgba(0, 0, 0, 0.5);
	--color-bg-overlay: rgba(0, 0, 0, 0.7);
	--color-bg-input: rgba(255, 255, 255, 0.7);
	
	/* Gradients */
	--gradient-modal: linear-gradient(135deg, #90EE90, #F5DEB3);
	--gradient-header: linear-gradient(135deg, #228B22, #32CD32);
	--gradient-button: linear-gradient(135deg, #32CD32, #228B22);
	--gradient-button-hover: linear-gradient(135deg, #228B22, #006400);
	--gradient-warning: linear-gradient(135deg, #FFE4B5, #FFEAA7);
	
	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;
	
	/* Borders */
	--border-radius-sm: 0.2rem;
	--border-radius-md: 0.5rem;
	--border-radius-lg: 1rem;
	--border-radius-xl: 1.5rem;
	--border-width: 2px;
	
	/* Shadows */
	--shadow-light: 2px 2px 4px rgba(0,0,0,0.3);
	--shadow-medium: 0 5px 15px rgba(0, 0, 0, 0.2);
	--shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.3);
	
	/* Transitions */
	--transition-fast: 0.2s;
	--transition-medium: 0.3s;
	--transition-slow: 0.6s;
	--transition-card-flip: 0.6s;
	
	/* Typography */
	--font-family-primary: Arial, sans-serif;
	--font-size-sm: 1rem;
	--font-size-md: 1.2rem;
	--font-size-lg: 1.5rem;
	--font-size-xl: 2em;
	--font-size-xxl: 2.5em;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: bold;
	
	/* Game specific */
	--card-size: 80px;
	--input-size: 3rem;
	--tile-max-width: 3em;
}

/* ==================== BASE STYLES ==================== */
* {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
}

body {
	/* Fallback for browsers without custom properties */
	background: #ffffff;
	background: var(--color-bg-primary);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-family: Arial, sans-serif;
	font-family: var(--font-family-primary);
	height: 100vh;
	margin: 0;
	overflow-y: auto; /* Enable vertical scrolling for keyboard handling */
	scroll-behavior: smooth; /* Smooth scrolling when keyboard appears */
	-webkit-transition: padding-bottom 0.3s ease;
	-o-transition: padding-bottom 0.3s ease;
	transition: padding-bottom 0.3s ease; /* Smooth padding animation for keyboard */
}

/* ==================== ACCESSIBILITY ==================== */
/* Focus styles for keyboard navigation */
button:focus,
input:focus {
	outline: 3px solid var(--color-primary);
	outline-offset: 2px;
}

/* Screen reader only content */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	:root {
		--color-card-border: #000;
		--color-slot-border: #000;
	}
}