/* ============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================ */

:root {
    /* Core Brand Colors */
    --accent-color: #C8F400;          /* Lime / padel yellow — primary accent */
    --accent-dark: #a8cc00;           /* Darker lime for hover states */
    --accent-rgb: 200, 244, 0;

    /* Dark palette (hero, dark sections) */
    --dark-bg: #0F0F0F;
    --dark-bg-card: #1A1A1A;
    --dark-bg-card-hover: #222222;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-border-strong: rgba(255, 255, 255, 0.15);

    /* Light palette (content sections) */
    --light-color: #FFFFFF;
    --light-alt: #F5F5F5;
    --light-card: #FFFFFF;
    --light-border: #E8E8E8;

    /* Text colors */
    --text-on-dark: #FFFFFF;
    --text-on-dark-muted: #A0A0A0;
    --text-on-dark-subtle: #666666;
    --text-color: #1A1A1A;
    --text-muted: #555555;
    --text-light: #777777;

    /* Legacy / kept for compatibility */
    --dark-color: #1A1A1A;
    --gray-color: #F5F5F5;
    --primary-color: #C8F400;         /* Remapped to accent */
    --secondary-color: #50C878;

    /* Status colors (kept for notifications / score bars) */
    --gradient-success: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    --gradient-warning: linear-gradient(90deg, #ffc107 0%, #ffb300 100%);
    --gradient-danger: linear-gradient(90deg, #dc3545 0%, #c82333 100%);
    --gradient-soft: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    --gradient-blue: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);

    /* Shadows */
    --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --shadow-small: 0 2px 6px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-button: 0 8px 24px rgba(200, 244, 0, 0.25);
    --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Spacing */
    --section-padding: 100px 0;
    --section-padding-dark: 110px 0;
    --container-max-width: 1200px;

    /* Border Radius */
    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 12px;
    --radius-xl: 20px;
    --radius-pill: 100px;
    --radius-circle: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 1s ease-in-out;

    /* Typography scale */
    --font-hero: clamp(2.8rem, 6vw, 5rem);
    --font-h2: clamp(2rem, 4vw, 3rem);
    --font-h3: 1.5rem;
    --font-section-label: 0.75rem;
    --line-height-tight: 1.1;
    --line-height-normal: 1.6;
}