/* ============================================================
 * YouthSoccerGenie — Global CSS Variables & Animations
 * Build: YSG_V01_CSS_VARIABLES
 * Source: coaches-portal-v5.1.html (approved mockup)
 * Created: 2026-03-22 ET
 * Author: DEE (Code Development)
 *
 * This is the locked CSS foundation for the GUI conversion.
 * All color, spacing, shadow, and radius tokens are defined here.
 * All pages inherit from these variables — do NOT duplicate them.
 * ============================================================ */

/* <!-- YSG_V01_CSS_VARIABLES --> */

:root {
    /* ===== BRAND COLORS ===== */
    --navy: #0B1A2E;
    --navy-light: #112240;
    --navy-hover: #1A2D4A;
    --gold: #D4A84B;
    --gold-hover: #E5B957;
    --gold-dim: rgba(212,168,75,0.15);
    --cream: #F4F0E8;
    --muted: #1E3A5F;

    /* ===== UTILITY COLORS ===== */
    --green: #27AE60;
    --red: #E74C3C;
    --blue: #3498DB;
    --white: #FFFFFF;
    --light-bg: #F8F7F5;

    /* ===== BORDERS & SHADOWS ===== */
    --border: #E5E2DC;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);

    /* ===== RADIUS ===== */
    --radius: 8px;
    --radius-lg: 12px;
}

/* ===== KEYFRAME ANIMATIONS ===== */

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes pulse-btn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,75,0.4); }
    50% { box-shadow: 0 0 0 10px rgba(212,168,75,0); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}