/**
 * Betformatics CSS Variables
 *
 * Centralized design tokens for consistent styling across all components.
 * Import this file first in any component CSS.
 *
 * @package Betformatics
 * @since 1.0.0
 */

:root {
    /* ==========================================================================
       COLOR PALETTE
       ========================================================================== */

    /* Primary Colors */
    --bf-primary: #7ed957;
    --bf-primary-rgb: 126, 217, 87;
    --bf-primary-dark: #5cb82e;
    --bf-primary-darker: #4a9c2d;

    /* Accent Colors */
    --bf-accent: #ffff00;
    --bf-accent-rgb: 255, 255, 0;

    /* Background Colors */
    --bf-bg-dark: #000000;
    --bf-bg-dark-rgb: 0, 0, 0;
    --bf-bg-card: rgba(0, 0, 0, 0.75);
    --bf-bg-overlay: rgba(0, 0, 0, 0.9);
    --bf-bg-subtle: rgba(0, 0, 0, 0.2);

    /* Text Colors */
    --bf-text-primary: #ffffff;
    --bf-text-secondary: #aaaaaa;
    --bf-text-muted: #888888;
    --bf-text-link: var(--bf-primary);

    /* Status Colors */
    --bf-success: #28a745;
    --bf-warning: #ffc107;
    --bf-danger: #dc3545;
    --bf-info: #17a2b8;

    /* Volatility Colors */
    --bf-volatility-low: #28a745;
    --bf-volatility-medium: #ffc107;
    --bf-volatility-high: #dc3545;

    /* ==========================================================================
       GRADIENTS
       ========================================================================== */

    --bf-gradient-card: linear-gradient(
        75deg,
        rgba(var(--bf-primary-rgb), 0.15),
        rgba(var(--bf-accent-rgb), 0.15)
    ), var(--bf-bg-card);

    --bf-gradient-button-primary: linear-gradient(
        180deg,
        var(--bf-primary-darker) 0%,
        #3d8526 100%
    );

    --bf-gradient-button-primary-hover: linear-gradient(
        180deg,
        var(--bf-primary-dark) 0%,
        var(--bf-primary-darker) 100%
    );

    --bf-gradient-placeholder: linear-gradient(
        135deg,
        rgba(var(--bf-primary-rgb), 0.2),
        rgba(var(--bf-accent-rgb), 0.1)
    );

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    --bf-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px rgba(var(--bf-primary-rgb), 0.2);
    --bf-shadow-card-hover: 0 4px 10px rgba(0, 0, 0, 0.6), 0 0 20px rgba(var(--bf-accent-rgb), 0.3), 0 0 30px rgba(var(--bf-primary-rgb), 0.3);
    --bf-shadow-button: 0 2px 4px rgba(0, 0, 0, 0.3);
    --bf-shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.4);

    /* ==========================================================================
       BORDERS
       ========================================================================== */

    --bf-border-width: 2px;
    --bf-border-color: var(--bf-primary);
    --bf-border-color-hover: var(--bf-accent);
    --bf-border-radius-sm: 4px;
    --bf-border-radius: 5px;
    --bf-border-radius-md: 6px;
    --bf-border-radius-lg: 10px;

    /* ==========================================================================
       SPACING
       ========================================================================== */

    --bf-spacing-xs: 4px;
    --bf-spacing-sm: 8px;
    --bf-spacing-md: 12px;
    --bf-spacing-lg: 16px;
    --bf-spacing-xl: 20px;
    --bf-spacing-xxl: 24px;

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    --bf-font-family: 'Fredoka', sans-serif;
    --bf-font-primary: 'Fredoka', sans-serif;
    --bf-font-size-xs: 9px;
    --bf-font-size-sm: 11px;
    --bf-font-size-base: 12px;
    --bf-font-size-md: 14px;
    --bf-font-size-lg: 15px;
    --bf-font-size-xl: 18px;
    --bf-font-weight-normal: 400;
    --bf-font-weight-bold: 700;
    --bf-line-height-tight: 1.2;
    --bf-line-height-normal: 1.3;
    --bf-line-height-relaxed: 1.4;

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */

    --bf-transition-fast: 0.15s ease;
    --bf-transition-base: 0.3s ease;
    --bf-transition-slow: 0.5s ease;

    /* ==========================================================================
       GRID
       ========================================================================== */

    --bf-grid-gap: var(--bf-spacing-xl);
    --bf-grid-gap-mobile: var(--bf-spacing-md);
    --bf-card-min-width: 280px;
    --bf-card-min-width-mobile: 240px;

    /* ==========================================================================
       Z-INDEX LAYERS
       ========================================================================== */

    --bf-z-base: 1;
    --bf-z-badge: 2;
    --bf-z-dropdown: 10;
    --bf-z-modal: 100;
    --bf-z-tooltip: 1000;

    /* ==========================================================================
       PERFORMANCE-OPTIMIZED SHADOWS
       Simplified shadows for better GPU performance
       ========================================================================== */

    --bf-shadow-fast: 0 2px 8px rgba(0, 0, 0, 0.4);
    --bf-shadow-fast-hover: 0 6px 20px rgba(0, 0, 0, 0.5);
    --bf-glow-primary: 0 0 15px rgba(var(--bf-primary-rgb), 0.3);
    --bf-glow-accent: 0 0 20px rgba(var(--bf-accent-rgb), 0.25);
}

/* ==========================================================================
   GPU ACCELERATION & PAINT CONTAINMENT
   Optimize rendering for animated/interactive card elements
   ========================================================================== */

/* Cards that animate on hover - promote to compositor layer */
.bf-mixed-posts-card,
.bf-cta-card,
.bf-provider-card,
.bf-slot-card,
.bf-site-card,
.betformatics-spilforslag-card,
.spilforslag-card,
.promotion-card,
.latest-promotions .promotion-card,
.bf-slots-card {
    will-change: transform;
    contain: layout style;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Release GPU memory when not hovering */
.bf-mixed-posts-card:not(:hover),
.bf-cta-card:not(:hover),
.bf-provider-card:not(:hover),
.bf-slot-card:not(:hover),
.bf-site-card:not(:hover),
.betformatics-spilforslag-card:not(:hover),
.spilforslag-card:not(:hover),
.promotion-card:not(:hover),
.bf-slots-card:not(:hover) {
    will-change: auto;
}

/* Popup/Modal elements - use layout containment only (strict breaks position:fixed) */
.bf-popup,
.bf-modal,
.bf-search-popup {
    contain: layout;
}

/* Mobile/navigation popups need NO containment - they contain position:fixed elements */

/* Grid containers - layout containment only */
.bf-mixed-posts-grid,
.bf-slots-grid,
.bf-providers-grid,
.bf-promotions-grid,
.betformatics-spilforslag-grid,
.spilforslag-grid,
.latest-promotions {
    contain: layout;
}

/* AJAX loading containers - content containment */
.betformatics-ajax-shortcode {
    contain: content;
}

/* ==========================================================================
   REDUCED MOTION PREFERENCE
   Respect user's motion preferences for accessibility & battery savings
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   PRINT OPTIMIZATION
   Remove decorative elements for printing
   ========================================================================== */
@media print {
    .bf-mixed-posts-card,
    .bf-cta-card,
    .bf-provider-card,
    .bf-slot-card,
    .betformatics-spilforslag-card,
    .spilforslag-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}