/*
 * Mobile App Design System — carparts64.ru (2026)
 * Native PWA tokens. Applied only inside @media (max-width: 767px) via mobile.css
 */
@media (max-width: 767px) {
  :root {
    /* Layout shell */
    --m-tabbar-height: 64px;
    --m-header-height: 56px;
    --m-sticky-action-height: 80px;
    --m-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-page-pad-x: 16px;
    --m-page-gap: 20px;

    /* Radii */
    --m-radius-sm: 14px;
    --m-radius: 20px;
    --m-radius-lg: 22px;
    --m-radius-sheet: 24px;

    /* Spacing */
    --m-space-xs: 8px;
    --m-space-sm: 12px;
    --m-space-md: 16px;
    --m-space-lg: 20px;
    --m-space-xl: 24px;
    --m-space-2xl: 32px;

    /* Typography */
    --m-h1: clamp(30px, 8vw, 34px);
    --m-h2: clamp(24px, 6.5vw, 28px);
    --m-h3: clamp(18px, 4.8vw, 20px);
    --m-text: 17px;
    --m-text-sm: 16px;
    --m-caption: 13px;
    --m-line: 1.45;

    /* Touch */
    --m-touch: 48px;
    --m-touch-sm: 44px;

    /* Surfaces */
    --m-bg: #f2f4f7;
    --m-surface: #ffffff;
    --m-surface-elevated: #ffffff;
    --m-border: rgba(15, 23, 42, 0.08);
    --m-shadow-card: 0 2px 16px rgba(15, 23, 42, 0.06);
    --m-shadow-sheet: 0 -8px 40px rgba(15, 23, 42, 0.16);

    /* Tab bar */
    --m-tabbar-bg: rgba(255, 255, 255, 0.92);
    --m-tabbar-border: rgba(15, 23, 42, 0.06);
    --m-tab-active: #2563eb;
    --m-tab-inactive: #94a3b8;
  }
}