/* 
  Mad-Dam Landing Page - CSS Variables
  Updated: Complete design system with modern checkers color palette
  Changes: 
  - Updated heading font to Neuton
  - New color scheme (black/white/orange), typography system, spacing, and animation timings
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Neuton:wght@400;700;800&display=swap');

:root {
    /* Colors - Modern Checkers Theme */
    --color-black: #0A0A0A;
    --color-white: #F5F5F5;
    --color-board-dark: #1A1A1A;
    --color-board-light: #E8E8E8;
    
    /* Accent - Subtle 70s Touch */
    --color-accent-orange: #F7B801;
    --color-accent-yellow: #F7B801;
    
    /* UI States */
    --color-success: #2ECC71;
    --color-error: #E74C3C;
    --color-hover: #333333;
    
    /* Backgrounds */
    --bg-primary: #0A0A0A;
    --bg-secondary: #1A1A1A;
    --bg-section-alt: #121212;
    
    /* Text */
    --text-primary: #F5F5F5;
    --text-secondary: #B3B3B3;
    --text-muted: #666666;
    
    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Neuton', Georgia, serif;
    
    /* Type Scale */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 2rem;      /* 32px */
    --text-4xl: 2.5rem;    /* 40px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 4rem;      /* 64px */
    
    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* Spacing */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 2rem;     /* 32px */
    --space-xl: 3rem;     /* 48px */
    --space-2xl: 4rem;    /* 64px */
    --space-3xl: 6rem;    /* 96px */
    --space-4xl: 8rem;    /* 128px */
    
    /* Container */
    --container-max: 1280px;
    --container-padding: var(--space-lg);
    
    /* Animations */
    /* Board sliding animation */
    --anim-slide-duration: 0.4s;
    --anim-slide-easing: cubic-bezier(0.4, 0.0, 0.2, 1); /* Material Design easing */
    
    /* UI interactions */
    --anim-fast: 0.15s;
    --anim-normal: 0.3s;
    --anim-slow: 0.6s;
    
    /* Physics feel for pieces */
    --anim-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}