/* ============================================================================
   core/variables.css — Layout Variables

   CSS custom properties for layout dimensions and breakpoints.
   Color variables are in theme/theme-*.css
   Design tokens (spacing, typography) are in theme-memoro.css
   ============================================================================ */

:root {
    /* Viewport height (uses dvh when supported for mobile accuracy) */
    --app-viewport-height: 100vh;

    /* Dynamic heights set by JavaScript */
    --app-header-height: 0;
    --app-meeting-height: 0;
    --app-chrome-height: 0;
    --mobile-nav-height: 0;
    --keyboard-height: 0px; /* Set by keyboard.js when keyboard opens */ /* stylelint-disable-line length-zero-no-unit -- needs unit for calc() */

    /* Breakpoints (for reference, used in media queries) */
    --breakpoint-mobile: 600px;
    --breakpoint-tablet: 900px;

    /* =========================================================================
       VIEW CONTENT PADDING
       Standard padding for view content to account for header and query bar.
       Use these variables in all views for consistent spacing.
       ========================================================================= */

    /* Component heights */
    --view-header-height: 56px;          /* Mobile header row */
    --view-header-height-desktop: 44px;  /* Desktop header row (same as buttons) */
    --view-querybar-height: 60px;        /* Query bar container height */
    --view-sidebar-width: 44px;          /* Collapsed sidebar width */

    /* Mobile view padding */
    --view-padding-top: calc(
        var(--view-header-height) +
        env(safe-area-inset-top, 0px) +
        var(--space-3)
    );
    --view-padding-bottom: calc(
        var(--view-querybar-height) +
        env(safe-area-inset-bottom, 0px) +
        var(--space-4)
    );
    --view-padding-x: var(--space-4);

    /* Desktop view padding (accounts for sidebar) */
    --view-padding-top-desktop: calc(
        var(--view-header-height-desktop) +
        var(--space-4)
    );
    --view-padding-bottom-desktop: calc(
        var(--view-querybar-height) +
        var(--space-4)
    );
    --view-padding-left-desktop: calc(
        var(--view-sidebar-width) +
        var(--space-4)
    );
}

/* Use dynamic viewport height when supported */
@supports (height: 100dvh) {
    :root {
        --app-viewport-height: 100dvh;
    }
}