/**
 * Global CSS Variables
 */

:root {
    /* ========================================
	   Spacing & Sizing
	   ======================================== */

    /* Spacing */
    --uah-spacing-xs: 0.125rem;
    --uah-spacing-s: 0.25rem;
    --uah-spacing-m: 0.5rem;
    --uah-spacing-l: 1rem;
    --uah-spacing-xl: 1.5rem;
    --uah-spacing-xxl: 2rem;
    --uah-spacing-huge: 4rem;
    --uah-spacing-extreme: 6rem;
    --uah-spacing-huge-minus: -4rem;

    /* Border Radius */
    --uah-radius-s: 0.2rem;
    --uah-radius-m: 0.4rem;
    --uah-radius-l: 1.2rem;
    --uah-radius-full: 100%;

    /* Component Dimensions */
    --uah-toggle-width: 48px;
    --uah-toggle-height: 24px;
    --uah-toggle-slider-size: 18px;
    --uah-toggle-slider-offset: 3px;
    --uah-toggle-slider-travel: 24px;

    /* Loading Spinner */
    --uah-spinner-size: 48px;
    --uah-spinner-border-width: 4px;

    /* Image Stack */
    --uah-stack-image-size: 72px;
    --uah-stack-image-size-mobile: 48px;
    --uah-stack-overlap: -20px;
    --uah-stack-overlap-mobile: -12px;
    --uah-stack-border-width: 3px;
    --uah-stack-border-width-mobile: 2px;

    /* Recommendation */
    --uah-recommendation-badge-size: 110px;
    --uah-recommendation-badge-ribbon-width: 177px;

    /* ========================================
	   Typography
	   ======================================== */

    /* FONT FAMILY */
    --uah-font-comma-base: comma-base;

    /* Font size */
    --uah-font-size-xxs: 0.6rem;
    --uah-font-size-xs: 0.7rem;
    --uah-font-size-s: 0.8rem;
    --uah-font-size-m: 0.9rem;
    --uah-font-size-base: 1rem;
    --uah-font-size-l: 1.2rem;
    --uah-font-size-xl: 1.4rem;
    --uah-font-size-xxl: 1.8rem;
    --uah-font-size-xxxl: 4rem;

    /* Font Weights */
    --uah-font-weight-light: 300;
    --uah-font-weight-normal: 400;
    --uah-font-weight-semibold: 600;
    --uah-font-weight-black: 800;

    /* Line Heights */
    --uah-line-height-tight: 1;
    --uah-line-height-s: 1.2;
    --uah-line-height-normal: 1.5;
    --uah-line-height-relaxed: 1.6;

    /* ========================================
	   Colors (Using Existing Theme Variables)
	   ======================================== */

    /* Primary Colors */
    --uah-color-primary: #2ed131;
    --uah-color-secondary: #ff7c38;
    --uah-color-heading: #222222;
    --uah-color-text: #353531;
    --uah-color-faded: #6a6a6a;
    --uah-color-gray: #9c9c9c;

    /* Primary Alternative Colors */
    --uah-alt-color-heading: #ffffff;
    --uah-alt-color-text: #ffffff;

    /* Background Colors - from theme */
    --uah-color-bg: #ffffff;
    --uah-color-bg-alt: #f5f5f5;
    --uah-alt-color-bg: #000000;
    --uah-alt-color-bg-alt: #222222;

    /* Border Colors - from theme */
    --uah-color-border: #e9e9e9;

    /* Stars */
    --uah-color-star: #fbbf24;

    /* State Colors */
    --uah-color-success: #10b981;
    --uah-color-error: #991b1b;
    --uah-color-info: #ff7c38;
    --uah-color-white: #ffffff;

    /* Gamification Levels */
    --uah-color-bronze: #CD7F32;
    --uah-color-silver: #C0C0C0;
    --uah-color-gold: #FFD700;
    --uah-color-platinum: #E5E4E2;

    /* Overlay Colors */
    --uah-color-overlay: rgba(255, 255, 255, 0.85);
    --uah-color-tooltip-bg: #222222;
    --uah-color-tooltip-text: #ffffff;
    --uah-color-tooltip-dark-bg: rgba(0, 0, 0, 0.9);

    /* ========================================
	   Shadows
	   ======================================== */

    --uah-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --uah-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.25);
    --uah-shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.15);
    --uah-shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.25);
    --uah-shadow-2xl: 0 4px 12px rgba(0, 0, 0, 0.3);
    --uah-shadow-badge: 0 2px 10px rgba(0, 0, 0, 0.4);

    /* ========================================
	   Transitions
	   ======================================== */

    --uah-transition-fast: 0.2s ease;
    --uah-transition-normal: 0.3s ease;
    --uah-transition-slow: 0.4s ease;
    --uah-transition-spin: 0.8s linear infinite;

    /* ========================================
	   Z-Index Layers
	   ======================================== */

    --uah-z-badge: 2;
    --uah-z-discount-badge: 10;
    --uah-z-stack-hover: 100;
    --uah-z-overlay: 1000;
    --uah-z-tooltip: 1000;
    --uah-z-popup: 99999;
    --uah-z-popup-content: 100000;
    --uah-z-lightbox: 100001;
    --uah-z-toast: 100002;
    /* Toast notifications - above all modals and lightboxes */

    /* ========================================
	   Layout - Flex Values
	   ======================================== */

    /* Comparison Table Column Widths */
    --uah-col-image: 0 0 7%;
    --uah-col-name: 0 1 32%;
    --uah-col-price: 0 0 18%;
    --uah-col-payment: 0 0 8%;
    --uah-col-delivery: 0 0 8%;
    --uah-col-shop: 0 1 15%;
    --uah-col-link: 0 1 12%;

    /* ========================================
	   Filters & Effects
	   ======================================== */

    --uah-blur-overlay: blur(2px);

    /* ========================================
	   Badge Colors (Type/Spektrum)
	   ======================================== */

    /* Seed Type Colors - can be customized */
    --uah-badge-autoflower-bg: #000000;
    --uah-badge-feminisiert-bg: #000000;
    --uah-badge-regulaer-bg: #000000;

    /* Oil Type Colors - can be customized */
    --uah-badge-vollspektrum-bg: #000000;
    --uah-badge-broad-spektrum-bg: #000000;
    --uah-badge-isolat-bg: #000000;

    /* ========================================
	   Responsive Breakpoints (for reference)
	   ======================================== */

    /* These are for documentation, not used directly in CSS */
    /* Mobile: 479px and below */
    /* Tablet: 600px and below */
    /* Small Desktop: 767px and below */
    /* Desktop: 1140px and below */

}