/* =====================================================================
   Chat Platform — Theme Tokens
   Light + Dark Mode via CSS Variables
   ===================================================================== */

/* ---------- Light (default) ---------- */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg-color:         #f5f7fb;
  --bg-elevated:      #ffffff;
  --card-color:       #ffffff;
  --card-hover:       #f9fafb;
  --sidebar-bg:       #ffffff;
  --header-bg:        rgba(255, 255, 255, 0.85);
  --overlay-bg:       rgba(15, 23, 42, 0.45);
  --input-bg:         #ffffff;
  --input-bg-focus:   #ffffff;

  /* Text */
  --text-color:       #0f172a;
  --text-strong:      #020617;
  --muted-color:      #64748b;
  --muted-2:          #94a3b8;
  --inverse-text:     #ffffff;

  /* Borders */
  --border-color:     #e2e8f0;
  --border-strong:    #cbd5e1;
  --divider:          #eef2f7;

  /* Brand */
  --primary-color:    #2563eb;
  --primary-hover:    #1d4ed8;
  --primary-soft:     #eff6ff;
  --primary-text:     #ffffff;
  --secondary-color:  #7c3aed;
  --secondary-hover:  #6d28d9;

  /* Status */
  --success-color:    #16a34a;
  --success-soft:     #dcfce7;
  --danger-color:     #dc2626;
  --danger-hover:     #b91c1c;
  --danger-soft:      #fee2e2;
  --warning-color:    #d97706;
  --warning-soft:     #fef3c7;
  --info-color:       #0284c7;
  --info-soft:        #e0f2fe;

  /* Chat bubbles */
  --message-user-bg:      #2563eb;
  --message-user-text:    #ffffff;
  --message-other-bg:     #ffffff;
  --message-other-text:   #0f172a;
  --message-system-bg:    #eef2f7;
  --message-system-text:  #64748b;

  /* Presence */
  --online-color:     #22c55e;
  --away-color:       #f59e0b;
  --offline-color:    #94a3b8;

  /* Shadow */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.10), 0 2px 6px -2px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 12px 32px -8px rgb(15 23 42 / 0.16), 0 8px 16px -8px rgb(15 23 42 / 0.08);
  --shadow-xl: 0 24px 60px -12px rgb(15 23 42 / 0.24);

  /* Focus ring */
  --ring: 0 0 0 3px rgb(37 99 235 / 0.18);

  color-scheme: light;
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
  --bg-color:         #0b1220;
  --bg-elevated:      #121a2b;
  --card-color:       #131c2e;
  --card-hover:       #1a2438;
  --sidebar-bg:       #0f172a;
  --header-bg:        rgba(11, 18, 32, 0.82);
  --overlay-bg:       rgba(0, 0, 0, 0.65);
  --input-bg:         #0f172a;
  --input-bg-focus:   #131c2e;

  --text-color:       #e6ebf5;
  --text-strong:      #f8fafc;
  --muted-color:      #94a3b8;
  --muted-2:          #64748b;
  --inverse-text:     #0b1220;

  --border-color:     #253148;
  --border-strong:    #334155;
  --divider:          #1e293b;

  --primary-color:    #3b82f6;
  --primary-hover:    #60a5fa;
  --primary-soft:     #172554;
  --primary-text:     #ffffff;
  --secondary-color:  #8b5cf6;
  --secondary-hover:  #a78bfa;

  --success-color:    #22c55e;
  --success-soft:     #052e16;
  --danger-color:     #ef4444;
  --danger-hover:     #f87171;
  --danger-soft:      #450a0a;
  --warning-color:    #f59e0b;
  --warning-soft:     #451a03;
  --info-color:       #38bdf8;
  --info-soft:        #082f49;

  --message-user-bg:      #2563eb;
  --message-user-text:    #ffffff;
  --message-other-bg:     #1a2438;
  --message-other-text:   #e6ebf5;
  --message-system-bg:    #1e293b;
  --message-system-text:  #94a3b8;

  --online-color:     #22c55e;
  --away-color:       #f59e0b;
  --offline-color:    #64748b;

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.5);
  --shadow-md: 0 6px 16px -2px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 16px 40px -8px rgb(0 0 0 / 0.6);
  --shadow-xl: 0 24px 60px -12px rgb(0 0 0 / 0.75);

  --ring: 0 0 0 3px rgb(59 130 246 / 0.30);

  color-scheme: dark;
}

/* ---------- Shared ---------- */
:root {
  --font-sans: "Cairo", "Tajawal", system-ui, -apple-system, "Segoe UI",
               "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --trans-fast: 120ms cubic-bezier(.2,.8,.2,1);
  --trans:      200ms cubic-bezier(.2,.8,.2,1);
  --trans-slow: 320ms cubic-bezier(.2,.8,.2,1);

  --header-h: 64px;
  --sidebar-w: 280px;
  --container-max: 1240px;
}

/* Smooth theme change */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color .28s ease, color .28s ease,
              border-color .28s ease, box-shadow .28s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}