/* CSS Custom Properties - Design Tokens */

:root {
    /* Colors - Primary */
    --color-primary: #8b4513;
    --color-primary-dark: #6b3410;
    --color-primary-darker: #5c2e0a;
    --color-primary-light: #a0522d;
    
    /* Colors - Background */
    --color-bg-dark: #2c1810;
    --color-bg-darker: #1a0f08;
    --color-bg-container: #f4e8d0;
    --color-bg-container-light: #e8dcc0;
    --color-bg-input: #faf5e8;
    --color-bg-input-focus: #fff8e8;
    
    /* Colors - Text */
    --color-text-primary: #5c2e0a;
    --color-text-secondary: #3d1f0a;
    --color-text-heading: #6b3410;
    --color-text-light: #4a3a1a;
    --color-text-medium: #5c3f1f;
    
    /* Colors - Accent */
    --color-accent-success: #6b5b2d;
    --color-accent-warning: #8b6f47;
    
    /* Colors - RGBA values for overlays */
    --color-primary-rgb: 139, 69, 19;
    --color-primary-light-rgb: 160, 82, 45;
    --color-accent-rgb: 101, 67, 33;
    --color-accent-warning-rgb: 139, 100, 50;
    
    /* Spacing */
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-base: 8px;
    --spacing-lg: 10px;
    --spacing-xl: 12px;
    --spacing-2xl: 15px;
    --spacing-3xl: 18px;
    --spacing-4xl: 20px;
    --spacing-5xl: 24px;
    
    /* Border */
    --border-width-thin: 1px;
    --border-width-base: 2px;
    --border-width-thick: 3px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    
    /* Typography */
    --font-family-serif: 'Crimson Text', 'Times New Roman', serif;
    --font-family-heading: 'Cinzel', serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 28px;
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.8;
    --letter-spacing-sm: 0.5px;
    --letter-spacing-md: 1px;
    --letter-spacing-lg: 2px;
    
    /* Shadows */
    --shadow-inset-sm: inset 0 2px 4px rgba(var(--color-primary-rgb), 0.1);
    --shadow-inset-md: inset 0 0 20px rgba(var(--color-primary-rgb), 0.1);
    --shadow-outset-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-outset-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-outset-lg: 0 6px 12px rgba(0, 0, 0, 0.4);
    --shadow-outset-xl: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-text-sm: 1px 1px 1px rgba(var(--color-primary-rgb), 0.2);
    --shadow-text-md: 2px 2px 0px rgba(var(--color-primary-rgb), 0.3);
    --shadow-text-glow: 0 0 10px rgba(var(--color-primary-rgb), 0.2);
    --shadow-focus: 0 0 8px rgba(var(--color-primary-light-rgb), 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
    
    /* Opacity */
    --opacity-disabled: 0.6;
    --opacity-inactive: 0.5;
    --opacity-overlay-light: 0.1;
    --opacity-overlay-medium: 0.15;
    --opacity-overlay-dark: 0.2;
    --opacity-overlay-darker: 0.3;
    --opacity-overlay-formula: 0.08;
    --opacity-overlay-bonuses: 0.08;
    
    /* Dimensions */
    --width-input-number: 70px;
    --width-input-text: 90px;
    --width-input-target: 30px;
    --width-input-bonus: 50px;
    --width-educational-panel: 320px;
    --width-educational-panel-min: 280px;
    --width-h1-line: 200px;
    --height-h1-line: 2px;
    --height-panel-header: 40px;
    --height-btn-small: 32px;
    --min-width-btn-small: 32px;
    --checkbox-size: 18px;
    
    /* Layout */
    --gap-base: 8px;
    --gap-md: 12px;
    --gap-lg: 15px;
    --padding-body-v: 2.5vh;
    --padding-body-h: 2.5vw;
    --margin-wrapper-v: 2.5vh;
    --height-wrapper-offset: 10vh;
}