/**
 * Betformatics CSS Variables
 *
 * Centralized color and spacing variables for consistent styling.
 * Include this file as a dependency for other stylesheets.
 *
 * @package Betformatics
 */

:root {
    /* =============================================================================
       PRIMARY COLORS
       ============================================================================= */
    --bf-primary: #1848A0;
    --bf-primary-hover: #133a80;
    --bf-primary-light: rgba(24, 72, 160, 0.1);
    --bf-primary-shadow: rgba(24, 72, 160, 0.3);
    --bf-primary-shadow-hover: rgba(24, 72, 160, 0.4);

    /* =============================================================================
       STATUS COLORS
       ============================================================================= */
    --bf-success: #22c55e;
    --bf-success-dark: #16a34a;
    --bf-success-light: #d1fae5;
    --bf-success-shadow: rgba(34, 197, 94, 0.4);

    --bf-error: #ef4444;
    --bf-error-dark: #dc2626;
    --bf-error-light: #fee2e2;
    --bf-error-shadow: rgba(239, 68, 68, 0.4);

    --bf-warning: #eab308;
    --bf-warning-dark: #ca8a04;
    --bf-warning-light: #fef3c7;
    --bf-warning-shadow: rgba(234, 179, 8, 0.4);

    /* =============================================================================
       NEUTRAL COLORS
       ============================================================================= */
    --bf-white: #ffffff;
    --bf-black: #000000;

    /* Gray scale */
    --bf-gray-50: #f9fafb;
    --bf-gray-100: #f3f4f6;
    --bf-gray-200: #e5e7eb;
    --bf-gray-300: #d1d5db;
    --bf-gray-400: #9ca3af;
    --bf-gray-500: #6b7280;
    --bf-gray-600: #4b5563;
    --bf-gray-700: #374151;
    --bf-gray-800: #1f2937;
    --bf-gray-900: #111827;

    /* Slate scale (for backgrounds) */
    --bf-slate-50: #f8fafc;
    --bf-slate-100: #f1f5f9;
    --bf-slate-200: #e2e8f0;
    --bf-slate-300: #cbd5e1;
    --bf-slate-400: #94a3b8;
    --bf-slate-500: #64748b;
    --bf-slate-600: #475569;
    --bf-slate-700: #334155;

    /* =============================================================================
       TEXT COLORS
       ============================================================================= */
    --bf-text-primary: #1d2327;
    --bf-text-secondary: #334155;
    --bf-text-muted: #6b7280;
    --bf-text-light: #9ca3af;

    /* =============================================================================
       BORDER COLORS
       ============================================================================= */
    --bf-border: #e5e7eb;
    --bf-border-light: #f1f5f9;
    --bf-border-dark: #d1d5db;

    /* =============================================================================
       BACKGROUND COLORS
       ============================================================================= */
    --bf-bg-white: #ffffff;
    --bf-bg-light: #f8fafc;
    --bf-bg-gray: #f3f4f6;
    --bf-bg-dark: #1f2937;

    /* =============================================================================
       RATING COLORS
       ============================================================================= */
    --bf-star: #fbbf24;
    --bf-star-empty: #e5e7eb;

    /* =============================================================================
       TYPOGRAPHY
       ============================================================================= */
    --bf-font-family: inherit;
    --bf-font-size-xs: 10px;
    --bf-font-size-sm: 12px;
    --bf-font-size-base: 14px;
    --bf-font-size-md: 16px;
    --bf-font-size-lg: 18px;
    --bf-font-size-xl: 20px;
    --bf-font-size-2xl: 24px;

    --bf-font-weight-normal: 400;
    --bf-font-weight-medium: 500;
    --bf-font-weight-semibold: 600;
    --bf-font-weight-bold: 700;

    --bf-line-height-tight: 1.2;
    --bf-line-height-normal: 1.4;
    --bf-line-height-relaxed: 1.6;

    /* =============================================================================
       SPACING
       ============================================================================= */
    --bf-spacing-xs: 4px;
    --bf-spacing-sm: 8px;
    --bf-spacing-md: 12px;
    --bf-spacing-base: 16px;
    --bf-spacing-lg: 20px;
    --bf-spacing-xl: 24px;
    --bf-spacing-2xl: 32px;

    /* =============================================================================
       BORDER RADIUS
       ============================================================================= */
    --bf-radius-sm: 4px;
    --bf-radius-md: 6px;
    --bf-radius-base: 8px;
    --bf-radius-lg: 12px;
    --bf-radius-xl: 16px;
    --bf-radius-full: 9999px;

    /* =============================================================================
       SHADOWS
       ============================================================================= */
    --bf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --bf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --bf-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --bf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --bf-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
    --bf-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);

    /* Card-specific shadows with hover states */
    --bf-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --bf-shadow-card-hover: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Colored shadows for buttons */
    --bf-shadow-primary: 0 4px 12px rgba(24, 72, 160, 0.25);
    --bf-shadow-primary-hover: 0 6px 16px rgba(24, 72, 160, 0.35);

    /* =============================================================================
       TRANSITIONS
       ============================================================================= */
    --bf-transition-fast: 0.15s ease;
    --bf-transition-base: 0.2s ease;
    --bf-transition-slow: 0.3s ease;

    /* =============================================================================
       Z-INDEX STACK
       Organized hierarchy to prevent conflicts with Elementor
       Elementor uses: modal ~9999, sticky ~99, dropdown ~10000
       ============================================================================= */
    --bf-z-base: 1;
    --bf-z-dropdown: 100;
    --bf-z-sticky: 200;
    --bf-z-fixed: 500;
    --bf-z-overlay: 900;
    --bf-z-modal: 1000;
    --bf-z-modal-backdrop: 999;
    --bf-z-tooltip: 1100;
    --bf-z-popup: 1200;
    --bf-z-notification: 1300;
    /* Keep below Elementor's editor panel (9999+) */
    --bf-z-max: 9990;

    /* =============================================================================
       COMMON PATTERNS
       Reusable values for cards, buttons, and form elements
       ============================================================================= */

    /* Card defaults */
    --bf-card-bg: var(--bf-white);
    --bf-card-border: var(--bf-border);
    --bf-card-radius: var(--bf-radius-lg);
    --bf-card-padding: var(--bf-spacing-base);
    --bf-card-shadow: var(--bf-shadow-card);
    --bf-card-shadow-hover: var(--bf-shadow-card-hover);

    /* Button defaults */
    --bf-btn-padding-y: 10px;
    --bf-btn-padding-x: 20px;
    --bf-btn-radius: var(--bf-radius-md);
    --bf-btn-font-weight: var(--bf-font-weight-semibold);

    /* Input defaults */
    --bf-input-padding: 12px 16px;
    --bf-input-radius: var(--bf-radius-base);
    --bf-input-border: var(--bf-border);
    --bf-input-bg: var(--bf-white);

    /* Gap scale (for flex/grid) */
    --bf-gap-xs: 4px;
    --bf-gap-sm: 8px;
    --bf-gap-md: 12px;
    --bf-gap-base: 16px;
    --bf-gap-lg: 20px;
    --bf-gap-xl: 24px;
    --bf-gap-2xl: 32px;
}

/* =============================================================================
   RESPONSIVE BREAKPOINTS (as CSS comments for reference)
   These must be used as media query values, not CSS variables

   Mobile:     < 640px   (max-width: 639px)
   Tablet:     640-1024px (min-width: 640px) and (max-width: 1024px)
   Desktop:    > 1024px  (min-width: 1025px)

   Standard breakpoints used in this plugin:
   - 480px  : Small mobile
   - 640px  : Mobile/Tablet boundary
   - 768px  : Tablet portrait
   - 1024px : Tablet/Desktop boundary
   - 1200px : Large desktop
   ============================================================================= */