/* ============================================
   DURAK - CSS Styles
   Russian Card Game
   ============================================ */

:root {
    /* Colors - Rich casino theme */
    --bg-dark: #0a0f1a;
    --bg-felt: #1a472a;
    --bg-felt-dark: #0f2d1a;
    --felt-pattern: radial-gradient(ellipse at center, #1e5631 0%, #1a472a 50%, #0f2d1a 100%);
    
    --gold: #d4af37;
    --gold-light: #f4d03f;
    --gold-dark: #b8860b;
    
    --crimson: #8b0000;
    --crimson-light: #c41e3a;
    
    --ivory: #fffff0;
    --ivory-dark: #f5f5dc;
    
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    --card-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
    
    /* Typography */
    --font-display: 'Cinzel', serif;
    --font-body: 'Playfair Display', Georgia, serif;
    
    /* Sizes - responsive card dimensions */
    /* clamp(min, preferred, max) for fluid scaling */
    --card-width: clamp(45px, 8vw, 70px);
    --card-height: clamp(65px, 11.5vw, 100px);
    --card-border-radius: clamp(5px, 1vw, 8px);
    
    /* Mini card sizes (trump display, card backs) */
    --mini-card-width: clamp(25px, 4vw, 35px);
    --mini-card-height: clamp(35px, 5.5vw, 50px);
    
    /* Touch target minimum sizes */
    --touch-target-min: 44px;
    
    /* Spacing - responsive */
    --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
    --spacing-sm: clamp(0.5rem, 1vw, 1rem);
    --spacing-md: clamp(1rem, 2vw, 1.5rem);
    --spacing-lg: clamp(1.5rem, 3vw, 2.5rem);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
}