/**
 * Shared CSS Variables
 *
 * Common variables and utilities shared across all widgets.
 * Loaded on all pages for consistency.
 *
 * @package VirtualeaguesSeasonCard
 * @version 2.0
 */

:root {
    /* Color Scheme Variables */
    --vl-dark-nebula: #8044d3;
    --vl-midnight-tech: #4169e1;
    --vl-crimson-void: #ff3e4d;
    --vl-toxic-glow: #3ef254;
    --vl-cyber-orange: #ff9b00;
    --vl-arctic-mint: #00f0c7;
    --vl-magenta-pulse: #ff39c2;
    --vl-carbon-gray: #8c8c8c;
    --vl-volt-yellow: #FFFF00;
    --vl-copper-core: #E67E22;
    --vl-frost-white: #F0FFFF;
    --vl-lime-surge: #CCFF00;
    --vl-neon-sand: #FFE4B5;
    --vl-coral-burn: #FF7F50;
    --vl-gold-rush: #FFD700;
    --vl-chrome-edge: #E8E8E8;
    --vl-earth-pulse: #8B4513;
    --vl-rose-shock: #FF66CC;

    /* Common Colors */
    --vl-bg-dark: #151419;
    --vl-bg-darker: #222127;
    --vl-border-dark: #292929;
    --vl-text-light: #ddd;
    --vl-text-white: #fff;
    --vl-progress-bg: #363636;

    /* Spacing */
    --vl-border-radius: 2.25rem;
    --vl-small-radius: 1rem;

    /* Typography */
    --vl-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/**
 * Common utility classes
 */

.vl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.vl-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/**
 * Performance optimization classes
 */

.vl-lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vl-lazy-image.loaded {
    opacity: 1;
}