/* Baseball Basics - CSS Variables */

:root {
    /* Color Palette - Warm Vintage Baseball */
    --grass-light: #2E5A1C;
    --grass-mid: #26521A;
    --grass-dark: #1E4410;
    --dirt-light: #8B6914;
    --dirt-mid: #7A5B12;
    --dirt-dark: #6B4F0F;
    --chalk-white: #F5F5DC;
    --baseball-red: #8B0000;
    --baseball-red-light: #A52A2A;
    --navy-blue: #1C3D5A;
    --navy-light: #2A5A7A;
    --aged-paper: #FDF6E3;
    --aged-paper-dark: #EEE4D0;
    --warning-track: #A67C52;

    /* Warm Vintage Accent Colors */
    --terracotta: #B8634B;
    --terracotta-dark: #9A503C;
    --terracotta-light: #C9785F;
    --vintage-gold: #D4A84B;
    --vintage-gold-dark: #B8923F;
    --vintage-cream: #FDF6E3;
    --vintage-brown: #5C4033;

    /* Text Colors */
    --text-primary: #2C2416;
    --text-secondary: #5A4A35;
    --text-light: #FDF6E3;

    /* Marker Colors - By Position Type */
    --marker-battery: #1C3D5A;      /* Pitcher & Catcher */
    --marker-battery-hover: #2A5A7A;
    --marker-infield: #8B0000;       /* Infielders */
    --marker-infield-hover: #A50000;
    --marker-outfield: #2E5A1C;      /* Outfielders */
    --marker-outfield-hover: #3A7024;
    --marker-batter: #D4A84B;        /* Batter - vintage gold */
    --marker-batter-hover: #E4B85B;
    --marker-text: #FDF6E3;
    --marker-border: #FDF6E3;

    /* Semantic Colors */
    --color-strike: #8B0000;
    --color-ball: #2E5A1C;
    --color-out: #1C3D5A;
    --color-hit: #D4A84B;

    /* Typography */
    --font-heading: 'Bebas Neue', 'Impact', sans-serif;
    --font-scoreboard: 'Press Start 2P', monospace;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Sizing */
    --field-max-width: 800px;
    --panel-width: 400px;
    --marker-size: 44px;
    --header-height: 80px;

    /* Borders & Shadows */
    --border-radius: 4px;
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* Z-index layers */
    --z-field: 1;
    --z-markers: 10;
    --z-panel: 100;
    --z-modal: 1000;
}

/* Dark Mode - Night Game at the Ballpark */
html.dark-mode {
    /* Color Palette - Muted Night Game */
    --grass-light: #1E3F14;
    --grass-mid: #1A3512;
    --grass-dark: #142C0E;
    --dirt-light: #6B5212;
    --dirt-mid: #5C460F;
    --dirt-dark: #4D3B0C;
    --chalk-white: #D4D0C0;
    --baseball-red: #7A1A1A;
    --baseball-red-light: #8E2E2E;
    --navy-blue: #0F2233;
    --navy-light: #1A3A52;
    --aged-paper: #1A1D24;
    --aged-paper-dark: #12141A;
    --warning-track: #7A5C3E;

    /* Warm Vintage Accent Colors - Desaturated for Night */
    --terracotta: #9A5540;
    --terracotta-dark: #7E4433;
    --terracotta-light: #AB6650;
    --vintage-gold: #B8923F;
    --vintage-gold-dark: #9A7A34;
    --vintage-cream: #2A2D34;
    --vintage-brown: #3D2B20;

    /* Text Colors - Light on Dark */
    --text-primary: #E8E0D4;
    --text-secondary: #A89B8A;
    --text-light: #F0EBE0;

    /* Marker Colors - Slightly Brighter for Visibility on Dark Field */
    --marker-battery: #1A4A6E;
    --marker-battery-hover: #2568A0;
    --marker-infield: #A52020;
    --marker-infield-hover: #C03030;
    --marker-outfield: #2A6A20;
    --marker-outfield-hover: #38802C;
    --marker-batter: #C49A40;
    --marker-batter-hover: #D8AE55;
    --marker-text: #F0EBE0;
    --marker-border: rgba(240, 235, 224, 0.7);

    /* Semantic Colors - Adjusted for Dark Backgrounds */
    --color-strike: #A52020;
    --color-ball: #2A6A20;
    --color-out: #1A4A6E;
    --color-hit: #C49A40;

    /* Borders & Shadows - Deeper for Dark Surfaces */
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-strong: 0 8px 32px rgba(0, 0, 0, 0.6);
}