/* ==========================================================================
   Smart Teacher — Mobile Design Tokens (Sprint 1)
   المصدر الملزم: 17_visual_system/OFFICIAL_VISUAL_SYSTEM.md
   كل شيء محصور داخل .st-mobile-shell — لا تسرب إلى Desktop أو Legacy.
   ========================================================================== */

.st-mobile-shell {
  /* ---- Core surfaces ---- */
  --stm-space-950: #050817;
  --stm-bg:        #080B24;
  --stm-elevated:  #0E1236;
  --stm-glass:     rgba(20, 25, 65, .60);
  --stm-glass-strong: rgba(24, 30, 78, .78);

  /* ---- Brand ---- */
  --stm-purple:      #7C5CFF;
  --stm-purple-deep: #5E3AFF;
  --stm-blue:        #3978FF;
  --stm-cyan:        #38D9FF;
  --stm-green:       #45E0A8;

  /* ---- Semantic ---- */
  --stm-success: #45E0A8;
  --stm-warning: #FFC94D;
  --stm-error:   #FF5C7C;
  --stm-info:    #38D9FF;
  --stm-live:    #FF3D71;
  --stm-gold:    #FFB82E;

  /* ---- Text ---- */
  --stm-text:          #FFFFFF;
  --stm-text-secondary: rgba(255, 255, 255, .72);
  --stm-text-muted:     rgba(255, 255, 255, .52);
  --stm-text-disabled:  rgba(255, 255, 255, .34);

  /* ---- Gradients ---- */
  --stm-grad-cta:        linear-gradient(135deg, #7C5CFF 0%, #5E3AFF 45%, #3978FF 100%);
  --stm-grad-premium:    linear-gradient(135deg, #9B6CFF 0%, #7C5CFF 46%, #38D9FF 100%);
  --stm-grad-success:    linear-gradient(135deg, #27C98A 0%, #45E0A8 100%);
  --stm-grad-tournament: linear-gradient(135deg, #FF9F2D 0%, #FFC94D 55%, #FFB82E 100%);
  --stm-grad-live:       linear-gradient(135deg, #FF3D71 0%, #FF5C7C 100%);

  /* ---- Borders & glass ---- */
  --stm-border:           rgba(255, 255, 255, .10);
  --stm-border-highlight: rgba(124, 92, 255, .40);
  --stm-blur: 18px;
  --stm-shadow: 0 14px 44px rgba(0, 0, 0, .24);
  --stm-shadow-glow: 0 10px 30px rgba(124, 92, 255, .28);

  /* ---- Radii ---- */
  --stm-r-card: 24px;
  --stm-r-card-lg: 28px;
  --stm-r-btn: 18px;
  --stm-r-pill: 999px;
  --stm-r-sm: 14px;

  /* ---- Spacing scale (4px base) ---- */
  --stm-s1: 4px;
  --stm-s2: 8px;
  --stm-s3: 12px;
  --stm-s4: 16px;
  --stm-s5: 20px;
  --stm-s6: 24px;
  --stm-s7: 32px;
  --stm-s8: 40px;

  /* ---- Typography scale (03_design_system) ---- */
  --stm-font: "Cairo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --stm-fs-display: clamp(26px, 7.4vw, 32px);
  --stm-fs-title:   clamp(20px, 5.6vw, 24px);
  --stm-fs-card:    clamp(16px, 4.4vw, 18px);
  --stm-fs-body:    clamp(14px, 3.9vw, 16px);
  --stm-fs-caption: clamp(11px, 3.2vw, 13px);
  --stm-lh-tight: 1.25;
  --stm-lh-body: 1.75;

  /* ---- Icon sizes (13_assets/ASSET_MANIFEST) ---- */
  --stm-icon-nav: 24px;
  --stm-icon-action: 22px;
  --stm-icon-subject: 42px;
  --stm-icon-cup: 72px;
  --stm-avatar-header: 44px;

  /* ---- Motion (15_motion/MOTION_SPEC) ---- */
  --stm-dur-enter: 340ms;
  --stm-dur-press: 100ms;
  --stm-dur-fast: 180ms;
  --stm-ease: cubic-bezier(.22, .61, .36, 1);
  --stm-stagger: 60ms;

  /* ---- Layout ---- */
  --stm-maxw: 520px;              /* لا عرض ثابت للهاتف — سقف فقط للشاشات الأعرض */
  --stm-header-h: 62px;
  --stm-nav-h: 66px;
  --stm-gutter: clamp(14px, 4.2vw, 20px);

  /* ---- Safe areas ---- */
  --stm-safe-top:    env(safe-area-inset-top, 0px);
  --stm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --stm-safe-left:   env(safe-area-inset-left, 0px);
  --stm-safe-right:  env(safe-area-inset-right, 0px);

  /* ---- z-index scale ---- */
  --stm-z-bg: -2;
  --stm-z-glow: -1;
  --stm-z-content: 1;
  --stm-z-header: 40;
  --stm-z-nav: 50;
  --stm-z-sheet: 60;
  --stm-z-toast: 70;
}

@media (prefers-reduced-motion: reduce) {
  .st-mobile-shell {
    --stm-dur-enter: 1ms;
    --stm-dur-press: 1ms;
    --stm-dur-fast: 1ms;
    --stm-stagger: 0ms;
  }
}