/**
 * Platty Menu - CSS Variables
 * Centralized design tokens for easy customization
 */

:root {
    /* ===================================
       COLORS
       =================================== */
    --platty-menu-bg: #FFFFFF;
    --platty-menu-text: #333333;
    --platty-menu-hover: #FF6B35;
    --platty-menu-border: rgba(206, 206, 206, 0.6);

    --platty-megamenu-bg: #FFFFFF;
    --platty-megamenu-card-bg: #FCFCFC;
    --platty-megamenu-card-bg-hover: #F0F0F0;
    --platty-megamenu-preview-bg: #F9F9F9;

    --platty-mobile-menu-bg: #FFFFFF;
    --platty-mobile-menu-overlay: rgba(0, 0, 0, 0.5);

    /* ===================================
       SPACING
       =================================== */
    --platty-spacing-xs: 8px;
    --platty-spacing-sm: 16px;
    --platty-spacing-md: 24px;
    --platty-spacing-lg: 32px;
    --platty-spacing-xl: 40px;

    /* ===================================
       TYPOGRAPHY
       =================================== */
    --platty-font-size-sm: 12px;
    --platty-font-size-base: 16px;
    --platty-font-size-lg: 18px;
    --platty-font-size-xl: 28px;

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

    /* ===================================
       BORDERS & RADIUS
       =================================== */
    --platty-border-radius-sm: 4px;
    --platty-border-radius-md: 8px;
    --platty-border-radius-lg: 12px;

    --platty-border-width: 1px;

    /* ===================================
       SHADOWS
       =================================== */
    --platty-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
    --platty-shadow-md: 0 10px 40px rgba(0, 0, 0, 0.1);

    /* ===================================
       TRANSITIONS
       =================================== */
    --platty-transition-fast: 0.2s ease;
    --platty-transition-base: 0.3s ease;
    --platty-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* ===================================
       Z-INDEX LAYERS
       =================================== */
    --platty-z-dropdown: 10000;
    --platty-z-mobile-menu: 100000;
    --platty-z-mobile-megamenu: 100001;

    /* ===================================
       BREAKPOINTS (for reference in JS)
       =================================== */
    --platty-breakpoint-mobile: 480px;
    --platty-breakpoint-tablet: 768px;
    --platty-breakpoint-tablet-lg: 1024px;
    --platty-breakpoint-desktop: 1199px;
}