@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ── Brand blue — مأخوذ من login مباشرة ── */
  --color-brand-50:   #EFF6FF;
  --color-brand-100:  #DBEAFE;
  --color-brand-200:  #BFDBFE;
  --color-brand-300:  #93C5FD;
  --color-brand-400:  #60A5FA;
  --color-brand-500:  #3B82F6;
  --color-brand-600:  #2563EB;
  --color-brand-700:  #1D4ED8;
  --color-brand-800:  #1E3A8A;
  --color-brand-900:  #172554;

  /* ── Sidebar gradient stops ── */
  --sidebar-grad-top:    #1E3A8A;
  --sidebar-grad-mid:    #1D4ED8;
  --sidebar-grad-bottom: #1565C0;

  /* ── Slate — نفس login ── */
  --color-slate-50:  #F8FAFC;
  --color-slate-100: #F1F5F9;
  --color-slate-200: #E2E8F0;
  --color-slate-300: #CBD5E1;
  --color-slate-400: #94A3B8;
  --color-slate-500: #64748B;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1E293B;
  --color-slate-900: #0F172A;

  /* ── Status colors ── */
  --color-success:       #16A34A;
  --color-success-light: #DCFCE7;
  --color-success-border:#BBF7D0;
  --color-warning:       #D97706;
  --color-warning-light: #FFFBEB;
  --color-warning-border:#FDE68A;
  --color-danger:        #DC2626;
  --color-danger-light:  #FEF2F2;
  --color-danger-border: #FECACA;
  --color-info:          #2563EB;
  --color-info-light:    #EFF6FF;
  --color-info-border:   #BFDBFE;

  /* ── Surfaces — light كامل زي login ── */
  --color-surface:         #FFFFFF;
  --color-surface-muted:   var(--color-slate-50);
  --color-surface-sunken:  var(--color-slate-100);
  --color-border:          var(--color-slate-200);
  --color-border-strong:   var(--color-slate-300);

  /* ── Text ── */
  --color-text-primary:   var(--color-slate-900);
  --color-text-secondary: var(--color-slate-600);
  --color-text-muted:     var(--color-slate-500);
  --color-text-hint:      var(--color-slate-400);
  --color-text-inverse:   #FFFFFF;

  /* ── للـ dashboard pages — light بدل dark ── */
  --color-surface-dark:        var(--color-slate-50);
  --color-surface-dark-raised: var(--color-surface);
  --color-surface-dark-card:   var(--color-surface);
  --color-border-dark:         var(--color-slate-200);
  --color-text-dark-primary:   var(--color-slate-900);
  --color-text-dark-muted:     var(--color-slate-500);

  /* ── Typography ── */
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* ── Radius ── */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;

  /* ── Layout ── */
  --sidebar-width:   240px;
  --topbar-height:    56px;
  --page-padding-x:   24px;

  /* ── Shadows ── */
  --shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-overlay: 0 10px 40px rgba(0,0,0,.1);

  /* ── Transitions ── */
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .animate-spin { animation: none; }
}