/* ============================================================
   Design tokens — spacing, typography, layout, z-index
   Color presets: style.css [data-theme] blocks
   Runtime overrides: js/app-theme.js
   ============================================================ */

:root {
    /* Spacing (4px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* Responsive type scale */
    --text-xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
    --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --text-base: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
    --text-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);

    /* Touch & chrome */
    --touch-min: 44px;
    --header-height: 60px;
    --mobile-tab-height: 60px;
    /* Dynamic viewport — avoids mobile browser chrome pushing fixed nav below fold */
    --viewport-height: 100vh;
    --viewport-height: 100dvh;
    --mobile-tab-inset: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px));
    --sidebar-width: 320px;

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    /* Motion */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.28s ease;

    /* Z-index stack */
    --z-base: 1;
    --z-dropdown: 50;
    --z-header: 100;
    --z-mobile-nav: 1400;
    --z-drawer-overlay: 1300;
    --z-drawer: 1310;
    --z-modal: 2000;
    --z-guided-tour: 9500;
    --z-confirm: 9800;
    --z-toast: 9999;

    /* Breakpoints (reference for media queries) */
    --bp-xs: 320px;
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 960px;
    --bp-xl: 1280px;
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--accent, #2ee59d);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01ms;
        --transition: 0.01ms;
        --transition-slow: 0.01ms;
    }
}