/**
 * Mobile Menu - CSS Variables
 * Custom properties for mobile menu styling - mapped to design system tokens
 */

:root {
    /* Mobile Menu Colors - Updated to match design */
    --mobile-menu-bg: var(--hafo-color-neutral-50);
    --mobile-menu-text: var(--hafo-color-brand);
    --mobile-menu-text-hover: var(--hafo-color-brand);
    --mobile-menu-border: var(--hafo-color-border-light);
    --mobile-menu-overlay: var(--hafo-color-bg-overlay);
    --mobile-menu-shadow: var(--hafo-shadow-lg);

    /* Toggle Button */

    /* 44px */
    --toggle-button-bg: transparent;
    --toggle-button-color: var(--mobile-menu-text);
    --toggle-icon-size: var(--hafo-space-6);

    /* 24px */

    /* Accordion */
    --accordion-item-height: var(--hafo-space-14);

    /* 56px */
    --accordion-item-padding: var(--hafo-space-2) var(--hafo-space-2-5);
    --accordion-indicator-size: var(--hafo-space-4);

    /* 16px */
    --accordion-indicator-color: var(--mobile-menu-text);
    --accordion-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --accordion-bg-hover: var(--hafo-color-bg-secondary);

    /* Slide-over Panel */
    --panel-width: 85vw;
    --panel-max-width: 400px;
    --panel-bg: var(--hafo-color-bg-card);
    --panel-shadow: var(--mobile-menu-shadow);
    --panel-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --panel-backdrop-opacity: 0.5;

    /* Panel Header */
    --panel-header-height: var(--hafo-space-15);

    /* 60px */
    --panel-header-padding: var(--hafo-space-2) var(--hafo-space-2-5);
    --panel-header-border: var(--hafo-border-width-1) solid var(--mobile-menu-border);
    --panel-title-size: var(--hafo-font-size-base);
    --panel-title-weight: var(--hafo-font-weight-medium);

    /* Back Button */
    --back-button-size: var(--hafo-space-11);

    /* 44px */
    --back-button-color: var(--mobile-menu-text);
    --back-button-icon-size: var(--hafo-space-2);

    /* 20px */
    --back-button-spacing: var(--hafo-space-1-5);

    /* Menu Item */
    --menu-item-height: var(--hafo-space-6);
    --menu-item-padding: var(--hafo-space-1-5) var(--hafo-space-2-5);
    --menu-item-font-size: var(--hafo-font-size-base);
    --menu-item-font-weight: var(--hafo-font-weight-normal);
    --menu-item-spacing: var(--hafo-space-half);

    /* Spacing */
    --mobile-menu-padding: 0px var(--hafo-space-2-5) 0px var(--hafo-space-2-5);
    --mobile-menu-header-height: var(--hafo-space-15);

    /* 60px */
    --item-spacing: var(--hafo-space-1-5);
    --section-spacing: var(--hafo-space-3);

    /* Z-index */
    --mobile-menu-z: 1000;
    --panel-z: 1001;
    --backdrop-z: 999;

    /* Breakpoints */
    --mobile-breakpoint: 1024px;
}