/**
 * 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 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;
}