/* Mobile — touch, safe-area and mobile type tokens. Applies at every width;
   components opt in via the .m-* classes in css/mobile.css. */
:root {
  /* Breakpoints (reference — CSS vars can't drive @media): xs <576 phone · sm 576 large phone · md 768 tablet · lg 992 desktop · xl 1200 */
  --bp-sm: 576px; /* @kind other */
  --bp-md: 768px; /* @kind other */
  --bp-lg: 992px; /* @kind other */
  --bp-xl: 1200px; /* @kind other */

  /* Touch */
  --m-touch: 44px; /* @kind spacing */
  --m-touch-lg: 48px; /* @kind spacing */
  --m-touch-gap: 8px; /* @kind spacing */

  /* Layout */
  --m-gutter: 16px; /* @kind spacing */
  --m-statusbar-h: 44px; /* @kind spacing */
  --m-appbar-h: 56px; /* @kind spacing */
  --m-tabbar-h: 56px; /* @kind spacing */
  --m-fab: 56px; /* @kind spacing */
  --safe-top: env(safe-area-inset-top, 0px); /* @kind spacing */
  --safe-bottom: env(safe-area-inset-bottom, 0px); /* @kind spacing */
  --safe-left: env(safe-area-inset-left, 0px); /* @kind spacing */
  --safe-right: env(safe-area-inset-right, 0px); /* @kind spacing */

  /* Type — body is 16px on mobile so inputs never trigger iOS zoom */
  --m-font-caption: 12px; /* @kind font */
  --m-font-footnote: 13px; /* @kind font */
  --m-font-body: 16px; /* @kind font */
  --m-font-callout: 15px; /* @kind font */
  --m-font-headline: 17px; /* @kind font */
  --m-font-title: 20px; /* @kind font */
  --m-font-large-title: 28px; /* @kind font */
  --m-font-tab: 10.5px; /* @kind font */

  /* Shape & motion */
  --m-radius: 12px; /* @kind radius */
  --m-radius-sheet: 16px; /* @kind radius */
  --m-radius-btn: 10px; /* @kind radius */
  --m-ease: cubic-bezier(.2,.8,.2,1); /* @kind other */
  --m-dur-sheet: 280ms; /* @kind other */
  --m-dur-tap: 120ms; /* @kind other */

  --m-grabber: rgba(4,32,69,0.18);
  --m-tabbar-bg: rgba(255,255,255,0.92);
  --m-pressed: rgba(4,32,69,0.06);
}
[data-theme="dark"] {
  --m-grabber: rgba(255,255,255,0.22);
  --m-tabbar-bg: rgba(26,35,50,0.92);
  --m-pressed: rgba(255,255,255,0.06);
}