/* ============================================================
   MOBILE GLOBAL DESIGN TOKENS
   ============================================================ */
:root {
    /* Colors */
    --m-primary-purple: #7C3AED;
    --m-light-purple: #F5F3FF;
    --m-medium-purple: #EDE9FE;
    --m-dark-purple: #5B21B6;
    --m-gradient-purple: linear-gradient(135deg, #7C3AED, #9F67F5);
    --m-pink-accent: #C026D3;
    --m-gradient-pink: linear-gradient(135deg, #C026D3, #7C3AED);
    
    --m-text-dark: #111827;
    --m-text-medium: #374151;
    --m-text-gray: #6B7280;
    --m-text-light: #9CA3AF;
    
    --m-success-green: #10B981;
    --m-error-red: #EF4444;
    --m-warning-orange: #F97316;
    --m-gold: #D97706;
    
    --m-background: #FFFFFF;
    --m-background-gray: #F9FAFB;
    --m-border: #E5E7EB;
    --m-border-light: #F3F4F6;

    /* Typography */
    --m-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Spacing */
    --m-page-padding: 16px;
    --m-card-padding: 16px;
    --m-section-gap: 20px;
    --m-item-gap: 12px;
}

/* ============================================================
   MOBILE BASE LAYOUT & RULES
   ============================================================ */
body.is-mobile-view {
    font-family: var(--m-font-family);
    font-size: 14px;
    color: var(--m-text-medium);
    background-color: var(--m-background-gray);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.fifo-mobile-app {
    max-width: 430px;
    margin: 0 auto;
    background-color: var(--m-background);
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
    overflow-x: hidden;
}

.fifo-mobile-inner-page {
    padding-top: 104px;
    padding-bottom: 72px;
    padding-left: var(--m-page-padding);
    padding-right: var(--m-page-padding);
}

.fifo-mobile-full-screen {
    padding-top: 0;
    padding-bottom: 0;
}

/* Base Typography Helpers */
.m-h1 { font-size: 34px; font-weight: 900; color: var(--m-text-dark); line-height: 1.2; }
.m-h2 { font-size: 28px; font-weight: 800; color: var(--m-text-dark); line-height: 1.25; }
.m-h3 { font-size: 22px; font-weight: 800; color: var(--m-text-dark); }
.m-subheading { font-size: 18px; font-weight: 700; color: var(--m-text-medium); }
.m-body { font-size: 14px; font-weight: 400; color: var(--m-text-medium); }
.m-caption { font-size: 12px; font-weight: 400; color: var(--m-text-gray); }
.m-label { font-size: 11px; font-weight: 500; color: var(--m-text-light); text-transform: uppercase; letter-spacing: 0.5px; }

/* Desktop vs Mobile Display Toggle */
@media (max-width: 1023px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}
@media (min-width: 1024px) {
    .desktop-only { display: block !important; }
    .mobile-only { display: none !important; }
    body.is-mobile-view .fifo-mobile-app { display: none !important; } /* Hide mobile app shell on desktop entirely */
}