/**
 * Website Builder Vergleich - Theme Variables
 *
 * CSS Custom Properties for easy theme customization
 * This file can be easily replaced when the designer delivers the final design
 *
 * @package WebsiteBuilderVergleich
 */

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

    /* Primary Colors */
    --wbv-primary: #1e3a5f;
    --wbv-primary-dark: #152a45;
    --wbv-primary-light: #2c5282;

    /* Background Colors */
    --wbv-bg-dark: #15151c;
    --wbv-bg-dark-secondary: #2a2e3b;
    --wbv-bg-light: #FFFFFF;
    --wbv-bg-light-secondary: #F8F9FA;
    --wbv-bg-card: #FFFFFF;
    --wbv-bg-table-header: #1e3a5f;
    --wbv-bg-table-row-alt: #F8F9FA;

    /* Text Colors */
    --wbv-text-primary: #171C2B;
    --wbv-text-secondary: #62666F;
    --wbv-text-muted: #81848E;
    --wbv-text-light: #FFFFFF;
    --wbv-text-on-dark: #FFFFFF;

    /* Button Colors */
    --wbv-button-primary-bg: linear-gradient(135deg, #28a745 0%, #218838 100%);
    --wbv-button-primary-bg-hover: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    --wbv-button-primary-text: #FFFFFF;

    --wbv-button-secondary-bg: linear-gradient(135deg, #fd7e14 0%, #e76f00 100%);
    --wbv-button-secondary-bg-hover: linear-gradient(135deg, #e76f00 0%, #d35400 100%);
    --wbv-button-secondary-text: #FFFFFF;

    --wbv-button-cta-bg: #2c64e3;
    --wbv-button-cta-bg-hover: #1a4fc7;
    --wbv-button-cta-text: #FFFFFF;

    /* Accent Colors */
    --wbv-accent: #FFD700;
    --wbv-accent-green: #1D7D22;
    --wbv-accent-blue: #2c64e3;
    --wbv-accent-purple: #483ABD;
    --wbv-accent-orange: #FE9807;

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

    /* Rating Colors */
    --wbv-rating-star: #FE9807;
    --wbv-rating-excellent: #28a745;
    --wbv-rating-good: #7cb342;
    --wbv-rating-average: #ffc107;
    --wbv-rating-poor: #dc3545;

    /* Border Colors */
    --wbv-border-light: #E5E7EB;
    --wbv-border-medium: #D1D5DB;
    --wbv-border-dark: #9CA3AF;

    /* Shadow Colors */
    --wbv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wbv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wbv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --wbv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

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

    /* Font Families */
    --wbv-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --wbv-font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --wbv-font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

    /* Font Sizes - Mobile First */
    --wbv-font-size-xs: 0.75rem;    /* 12px */
    --wbv-font-size-sm: 0.875rem;   /* 14px */
    --wbv-font-size-base: 1rem;     /* 16px */
    --wbv-font-size-lg: 1.125rem;   /* 18px */
    --wbv-font-size-xl: 1.25rem;    /* 20px */
    --wbv-font-size-2xl: 1.5rem;    /* 24px */
    --wbv-font-size-3xl: 1.875rem;  /* 30px */
    --wbv-font-size-4xl: 2.25rem;   /* 36px */

    /* Font Weights */
    --wbv-font-weight-normal: 400;
    --wbv-font-weight-medium: 500;
    --wbv-font-weight-semibold: 600;
    --wbv-font-weight-bold: 700;

    /* Line Heights */
    --wbv-line-height-tight: 1.25;
    --wbv-line-height-normal: 1.5;
    --wbv-line-height-relaxed: 1.75;

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

    --wbv-space-xs: 0.25rem;   /* 4px */
    --wbv-space-sm: 0.5rem;    /* 8px */
    --wbv-space-md: 1rem;      /* 16px */
    --wbv-space-lg: 1.5rem;    /* 24px */
    --wbv-space-xl: 2rem;      /* 32px */
    --wbv-space-2xl: 3rem;     /* 48px */
    --wbv-space-3xl: 4rem;     /* 64px */

    /* ==========================================================================
       LAYOUT
       ========================================================================== */

    /* Container */
    --wbv-container-max-width: 1200px;
    --wbv-container-padding: 1rem;

    /* Border Radius */
    --wbv-radius-sm: 4px;
    --wbv-radius-md: 8px;
    --wbv-radius-lg: 12px;
    --wbv-radius-xl: 16px;
    --wbv-radius-full: 9999px;

    /* ==========================================================================
       COMPONENTS
       ========================================================================== */

    /* Cards */
    --wbv-card-bg: var(--wbv-bg-card);
    --wbv-card-border: var(--wbv-border-light);
    --wbv-card-radius: var(--wbv-radius-lg);
    --wbv-card-shadow: var(--wbv-shadow-md);
    --wbv-card-padding: var(--wbv-space-lg);

    /* Buttons */
    --wbv-button-height: 48px;
    --wbv-button-height-sm: 36px;
    --wbv-button-height-lg: 56px;
    --wbv-button-radius: var(--wbv-radius-md);
    --wbv-button-padding: 0 1.5rem;

    /* Table */
    --wbv-table-header-bg: var(--wbv-bg-table-header);
    --wbv-table-row-alt-bg: var(--wbv-bg-table-row-alt);
    --wbv-table-border: var(--wbv-border-light);

    /* Logo */
    --wbv-logo-size-sm: 40px;
    --wbv-logo-size-md: 60px;
    --wbv-logo-size-lg: 80px;

    /* Badge */
    --wbv-badge-bg: var(--wbv-accent-purple);
    --wbv-badge-text: var(--wbv-text-light);
    --wbv-badge-radius: var(--wbv-radius-sm);

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

    --wbv-transition-fast: 150ms ease;
    --wbv-transition-normal: 250ms ease;
    --wbv-transition-slow: 350ms ease;

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

    --wbv-z-dropdown: 100;
    --wbv-z-sticky: 200;
    --wbv-z-fixed: 300;
    --wbv-z-modal-backdrop: 400;
    --wbv-z-modal: 500;
    --wbv-z-tooltip: 600;
}

/* ==========================================================================
   RESPONSIVE VARIABLE OVERRIDES
   ========================================================================== */

/* Tablet and up */
@media (min-width: 576px) {
    :root {
        --wbv-container-padding: 1.5rem;
        --wbv-card-padding: var(--wbv-space-xl);
    }
}

/* Desktop and up */
@media (min-width: 992px) {
    :root {
        --wbv-container-padding: 2rem;
        --wbv-font-size-3xl: 2.25rem;
        --wbv-font-size-4xl: 3rem;
    }
}