/* ============================================================
   ZhuMobile Connect — Theme CSS (ported from zhumobile/css/themes/theme.css)
   Keep in sync with the public site's design tokens.
   ============================================================ */

: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-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);

  /* ── Status colors ── */
  --clr-success:       #1E9E5A;
  --clr-success-a15:   rgba(30, 158, 90, 0.15);
  --clr-danger:        #E0473D;
  --clr-danger-a15:    rgba(224, 71, 61, 0.15);
  --clr-warning:       #E0A23D;
  --clr-warning-a15:   rgba(224, 162, 61, 0.15);

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

  /* ── Spacing & Layout ── */
  --nav-h:       72px;
  --sidebar-w:   240px;
  --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;

  /* ── Z-index Stack ── */
  --z-nav:    7000;
  --z-modal:  9000;
  --z-toast:  9500;
}

/* ── Dark Mode (default for Connect) ── */
[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-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-success-a15:   rgba(30, 158, 90, 0.20);
  --clr-danger-a15:    rgba(224, 71, 61, 0.20);
  --clr-warning-a15:   rgba(224, 162, 61, 0.20);
}