/* ============================================================
   SIMPLE PRO — MOBILE PLATFORM TOKENS
   Extends app_tokens.css for iOS/Android native-feel mobile app.
   Same semantic colors + brand tokens; different spatial rules.
   ============================================================ */

/* ------------------------------------------------------------
   MOBILE TYPOGRAPHY — Slightly larger, optimized for thumb reach
   Mobile body is 15px (not 14px); labels are 13px; captions 12px.
   No obsessive negative tracking — legibility on glass first.
   ------------------------------------------------------------ */
:root {
  --mob-font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  --mob-display-size:   1.875rem;  /* 30px — screen titles */
  --mob-display-weight: 700;
  --mob-display-lh:     1.2;
  --mob-display-ls:     -0.025em;

  --mob-title-size:     1.125rem;  /* 18px — section headers */
  --mob-title-weight:   600;
  --mob-title-lh:       1.3;
  --mob-title-ls:       -0.015em;

  --mob-body-size:      0.9375rem; /* 15px — comfortable on glass */
  --mob-body-weight:    400;
  --mob-body-lh:        1.5;
  --mob-body-ls:        -0.008em;

  --mob-body-med-weight: 500;

  --mob-label-size:     0.8125rem; /* 13px — list metadata, form labels */
  --mob-label-weight:   500;
  --mob-label-lh:       1.4;
  --mob-label-ls:       0;

  --mob-caption-size:   0.75rem;   /* 12px — timestamps, secondary */
  --mob-caption-weight: 400;
  --mob-caption-lh:     1.4;
  --mob-caption-ls:     0;

  --mob-micro-size:     0.6875rem; /* 11px — tab labels, badges */
  --mob-micro-weight:   500;
  --mob-micro-lh:       1.3;
  --mob-micro-ls:       0.005em;
}

/* ------------------------------------------------------------
   MOBILE TOUCH TARGETS & SPACING
   Apple HIG minimum: 44×44px. We target 48px for comfort.
   ------------------------------------------------------------ */
:root {
  --mob-touch-min:    44px;  /* HIG minimum */
  --mob-touch-base:   48px;  /* Our baseline row/button height */
  --mob-touch-lg:     56px;  /* Large CTA buttons */

  --mob-space-1:  4px;
  --mob-space-2:  8px;
  --mob-space-3:  12px;
  --mob-space-4:  16px;   /* standard cell padding */
  --mob-space-5:  20px;
  --mob-space-6:  24px;
  --mob-space-7:  32px;
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);  /* iPhone home bar */
}

/* ------------------------------------------------------------
   MOBILE BORDER RADIUS
   Slightly more rounded than web for that native warmth.
   ------------------------------------------------------------ */
:root {
  --mob-radius-sm:   8px;
  --mob-radius-md:   12px;  /* Cells, input fields */
  --mob-radius-lg:   16px;  /* Cards, sheets */
  --mob-radius-xl:   20px;  /* Bottom sheet top corners */
  --mob-radius-pill: 999px;
}

/* ------------------------------------------------------------
   MOBILE NAVIGATION PATTERNS
   Web: left sidebar. Mobile: bottom tab bar + stack navigation.
   ------------------------------------------------------------ */
:root {
  /* Top nav bar */
  --mob-navbar-height:     44px;
  --mob-navbar-bg:         rgba(255,255,255,0.92);
  --mob-navbar-blur:       saturate(180%) blur(20px);
  --mob-navbar-border:     rgba(0,0,0,0.1);

  /* Bottom tab bar */
  --mob-tabbar-height:     49px;  /* iOS standard */
  --mob-tabbar-bg:         rgba(255,255,255,0.92);
  --mob-tabbar-blur:       saturate(180%) blur(20px);
  --mob-tabbar-icon-size:  24px;
  --mob-tabbar-label-size: 10px;

  /* Bottom sheet */
  --mob-sheet-bg:          #ffffff;
  --mob-sheet-handle:      rgba(0,0,0,0.15);
  --mob-sheet-radius:      20px 20px 0 0;
}

/* ------------------------------------------------------------
   MOBILE SHADOWS — Softer, more diffuse for glass surfaces
   ------------------------------------------------------------ */
:root {
  --mob-shadow-card:    0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --mob-shadow-sheet:   0 -4px 32px rgba(0,0,0,0.12), 0 -1px 8px rgba(0,0,0,0.06);
  --mob-shadow-nav:     0 1px 0 rgba(0,0,0,0.1);
}

/* ------------------------------------------------------------
   MOBILE vs WEB ADAPTATION NOTES (as CSS comments)

   NAVIGATION
   ├── Web:    Left sidebar (240px) · sticky · dark (#1a1a1c)
   └── Mobile: Bottom tab bar (49px) · glass blur · 5 tabs max

   DRAWERS / PANELS
   ├── Web:    Right drawer (420px) · slides in from right
   └── Mobile: Bottom sheet · drag handle · 50% / 90% snap heights

   TABLES / LISTS
   ├── Web:    Dense table rows (44px) with hover states + column headers
   └── Mobile: List cells (64px+) with swipe actions (edit/delete)

   FORMS
   ├── Web:    Multi-column grid · labels above fields · tab order
   └── Mobile: Single column · floating labels · full-width inputs

   BUTTONS
   ├── Web:    32–36px height · compact · ghost/fill variants
   └── Mobile: 48–56px height · full-width primary CTA at bottom

   BELLE COMMAND BAR
   ├── Web:    Center-screen modal · ⌘K · search + action list
   └── Mobile: Bottom-anchored input · tap-to-expand · sheet layout

   EMPTY STATES
   ├── Web:    Centered in content area · icon + heading + CTA
   └── Mobile: Centered in scroll view · larger icon · tap-target CTA

   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------ */
:root {
  --bp-mobile:  390px;   /* iPhone 14 standard */
  --bp-tablet:  768px;   /* iPad portrait */
  --bp-desktop: 1024px;  /* Web app starts */
  --bp-wide:    1280px;  /* Full sidebar + content */
}

@media (max-width: 767px) {
  /* Mobile-first overrides */
  .platform-web  { display: none !important; }
  .platform-mob  { display: flex !important; }
}
@media (min-width: 768px) {
  .platform-web  { display: flex !important; }
  .platform-mob  { display: none !important; }
}