/* ============================================
   MR.VIP Design Tokens — Light Theme
   ============================================ */

:root {
  /* ---- Brand ---- */
  --brand:             #2563EB;
  --brand-light:       #3B82F6;
  --brand-dark:        #1D4ED8;
  --brand-bg:          #EFF6FF;
  --gold:              #CA8A04;
  --gold-light:        #EAB308;
  --gold-bg:           #FFFBEB;
  --gold-gradient:     linear-gradient(135deg, #CA8A04 0%, #EAB308 100%);
  --success:           #059669;
  --success-bg:        #ECFDF5;
  --danger:            #DC2626;
  --danger-bg:         #FEF2F2;
  --orange:            #EA580C;
  --orange-bg:         #FFF7ED;
  --purple:            #7C3AED;
  --purple-bg:         #F5F3FF;

  /* ---- Surfaces ---- */
  --bg-primary:        #FFFFFF;
  --bg-secondary:      #F8FAFC;
  --bg-tertiary:       #F1F5F9;
  --bg-card:           #FFFFFF;
  --bg-hover:          #F8FAFC;
  --bg-active:         #F1F5F9;
  --bg-input:          #F8FAFC;
  --bg-overlay:        rgba(0,0,0,0.4);
  --bg-page:           #F5F7FA;

  /* ---- Text ---- */
  --text-primary:      #0F172A;
  --text-secondary:    #64748B;
  --text-tertiary:     #94A3B8;
  --text-inverse:      #FFFFFF;
  --text-brand:        #2563EB;
  --text-gold:         #CA8A04;

  /* ---- Borders ---- */
  --border:            #E2E8F0;
  --border-light:      #F1F5F9;
  --border-focus:      #2563EB;

  /* ---- Typography ---- */
  --font:              -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:         'SF Mono', 'Fira Code', 'Consolas', monospace;
  --fs-10:             0.625rem;
  --fs-11:             0.6875rem;
  --fs-12:             0.75rem;
  --fs-13:             0.8125rem;
  --fs-14:             0.875rem;
  --fs-15:             0.9375rem;
  --fs-16:             1rem;
  --fs-18:             1.125rem;
  --fs-20:             1.25rem;
  --fs-24:             1.5rem;
  --fs-28:             1.75rem;
  --fs-32:             2rem;
  --fs-40:             2.5rem;
  --fs-48:             3rem;

  /* ---- Spacing ---- */
  --s-1:  4px;   --s-2:  8px;   --s-3:  12px;
  --s-4:  16px;  --s-5:  20px;  --s-6:  24px;
  --s-8:  32px;  --s-10: 40px;  --s-12: 48px;
  --s-16: 64px;  --s-20: 80px;  --s-24: 96px;

  /* ---- Radius ---- */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-float:0 8px 30px rgba(0,0,0,0.08);

  /* ---- Transitions ---- */
  --ease-fast:   0.15s ease;
  --ease-base:   0.25s ease;
  --ease-slow:   0.4s ease;
  --ease-spring: 0.4s cubic-bezier(0.34,1.56,0.64,1);

  /* ---- Z ---- */
  --z-base:    1;
  --z-drop:    100;
  --z-sticky:  200;
  --z-modal:   300;
  --z-toast:   400;
  --z-top:     500;

  /* ---- TMA ---- */
  --tma-w:           430px;
  --tma-header:      52px;
  --tma-tabbar:      56px;
}