/* ============================================================
   ZhuMobile — Theme CSS (Light/Dark CSS Variables)
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --clr-orange:        #F47B20;
  --clr-orange-light:  #FF9A4A;
  --clr-orange-dark:   #D4650F;
  --clr-orange-a10:    rgba(244, 123, 32, 0.10);
  --clr-orange-a20:    rgba(244, 123, 32, 0.20);
  --clr-orange-a35:    rgba(244, 123, 32, 0.35);
  --clr-orange-a60:    rgba(244, 123, 32, 0.60);
  --clr-teal:          #0B7070;

  /* ── Light Mode (default) ── */
  --clr-bg:            #FFFFFF;
  --clr-bg2:           #F6F6F6;
  --clr-bg3:           #ECECEC;
  --clr-surface:       #FFFFFF;
  --clr-surface2:      #F9F9F9;
  --clr-border:        rgba(0, 0, 0, 0.08);
  --clr-border-strong: rgba(0, 0, 0, 0.15);
  --clr-text:          #1A1A1A;
  --clr-text-muted:    #555555;
  --clr-text-dim:      #888888;
  --clr-hero-overlay:  rgba(255, 255, 255, 0.0);
  --clr-nav-scrolled:  rgba(255, 255, 255, 0.96);
  --clr-section-alt:   #F6F6F6;
  --clr-card-bg:       #FFFFFF;
  --clr-card-shadow:   0 4px 24px rgba(0, 0, 0, 0.07);
  --clr-card-hover:    0 12px 40px rgba(244, 123, 32, 0.15);
  --clr-input-bg:      #FAFAFA;
  --clr-input-border:  rgba(0, 0, 0, 0.12);
  --clr-input-focus:   rgba(244, 123, 32, 0.30);
  --clr-loader-bg:     #0A0A0A;
  --clr-loader-text:   #F47B20;

  /* ── Typography Scale ── */
  --f-brand:    'Sora', sans-serif;
  --f-heading:  'Plus Jakarta Sans', sans-serif;
  --f-body:     'Inter', sans-serif;

  /* ── Spacing & Layout ── */
  --nav-h:      72px;
  --section-px: 80px;
  --max-w:      1280px;
  --radius:     12px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ── Animation ── */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease2:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   0.2s;
  --dur-mid:    0.4s;
  --dur-slow:   0.8s;

  /* ── Z-index Stack ── */
  --z-peel:     8500;
  --z-nav:      7000;
  --z-mob:      7500;
  --z-loader:   9500;
  --z-cursor:   9999;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --clr-bg:            #121212;
  --clr-bg2:           #1A1A1A;
  --clr-bg3:           #242424;
  --clr-surface:       #1A1A1A;
  --clr-surface2:      #242424;
  --clr-border:        rgba(255, 255, 255, 0.08);
  --clr-border-strong: rgba(255, 255, 255, 0.16);
  --clr-text:          #E8E8E8;
  --clr-text-muted:    #A0A0A0;
  --clr-text-dim:      #606060;
  --clr-hero-overlay:  rgba(18, 18, 18, 0.0);
  --clr-nav-scrolled:  rgba(18, 18, 18, 0.96);
  --clr-section-alt:   #1A1A1A;
  --clr-card-bg:       #1A1A1A;
  --clr-card-shadow:   0 4px 24px rgba(0, 0, 0, 0.4);
  --clr-card-hover:    0 12px 40px rgba(244, 123, 32, 0.20);
  --clr-input-bg:      #1E1E1E;
  --clr-input-border:  rgba(255, 255, 255, 0.10);
  --clr-input-focus:   rgba(244, 123, 32, 0.35);
  --clr-loader-bg:     #080808;
  --clr-loader-text:   #F47B20;
}