/* ============================================================
   MoST Sindh IT Facilitation Portal v2 — Theme
   Government of Sindh, Pakistan · Ministry of Science & IT
   Color palette + design tokens
   ============================================================ */

:root {
  /* ---- Brand: dark navy + green accent ---- */
  --navy-900: #0a1628;
  --navy-800: #0f2034;
  --navy-700: #162b45;
  --navy-600: #1e3a5f;
  --navy-500: #2a4d72;

  --green-600: #059669;
  --green-500: #10b981;
  --green-400: #34d399;
  --green-100: #d1fae5;
  --green-50:  #ecfdf5;

  /* ---- Neutrals ---- */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --ink-50:  #f8fafc;
  --white:   #ffffff;

  /* ---- Status / semantic ---- */
  --blue-500: #3b82f6;   --blue-100: #dbeafe;
  --amber-500:#f59e0b;   --amber-100:#fef3c7;  --amber-50:#fffbeb;
  --red-500:  #ef4444;   --red-100:  #fee2e2;  --red-50:#fef2f2;
  --purple-500:#8b5cf6;  --purple-100:#ede9fe;
  --cyan-500: #06b6d4;   --cyan-100: #cffafe;
  --pink-500: #ec4899;   --pink-100: #fce7f3;
  --teal-500: #14b8a6;   --teal-100: #ccfbf1;

  /* ---- Surfaces (light mode default) ---- */
  --bg:           var(--ink-50);
  --bg-subtle:    var(--ink-100);
  --surface:      var(--white);
  --surface-2:    var(--ink-50);
  --border:       var(--ink-200);
  --border-strong:var(--ink-300);
  --text:         var(--ink-900);
  --text-muted:   var(--ink-500);
  --text-soft:    var(--ink-600);

  /* ---- Brand surfaces ---- */
  --brand:        var(--navy-900);
  --brand-2:      var(--navy-700);
  --brand-text:   var(--white);
  --accent:       var(--green-500);
  --accent-strong:var(--green-600);
  --accent-soft:  var(--green-100);

  /* ---- Status chip colors (used by JS) ---- */
  --st-open:      var(--blue-500);   --st-open-bg:    var(--blue-100);
  --st-progress:  var(--amber-500);  --st-progress-bg:var(--amber-100);
  --st-resolved:  var(--green-500);  --st-resolved-bg:var(--green-100);
  --st-closed:    var(--ink-400);    --st-closed-bg:  var(--ink-200);
  --st-reopened:  var(--red-500);    --st-reopened-bg:var(--red-100);

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-urdu: 'Noto Nastaliq Urdu', 'Inter', serif;
  --font-sindhi:'Noto Sans Sindhi', 'Inter', sans-serif;

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

  /* ---- Shadows ---- */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --sh-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);
  --sh-xl: 0 24px 56px rgba(10,22,40,.20);
  --sh-brand: 0 8px 24px rgba(16,185,129,.28);

  /* ---- Layout ---- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --header-h: 60px;
  --bottom-nav-h: 64px;
  --content-max: 1280px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---- Z-index scale ---- */
  --z-sidebar: 40;
  --z-header: 50;
  --z-dropdown: 60;
  --z-toast: 80;
  --z-modal: 70;
  --z-overlay: 65;
  --z-mobile-nav: 90;
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1220;
    --bg-subtle: #111a2e;
    --surface: #141f33;
    --surface-2: #0f1828;
    --border: #243049;
    --border-strong:#334155;
    --text: #e8eef7;
    --text-muted: #8da2bd;
    --text-soft: #a8b8d0;
    --ink-50: #0f1828;
    --ink-100:#141f33;
    --ink-200:#243049;
  }
}