/* =====================================================================
   Mutual Support Fund — design tokens
   Light : blue-white ground with soft gradient blooms, white cards and a
           light sidebar, slate ink, royal-blue accents
   Dark  : deep blue-slate ground, lifted panels, soft white ink, sky accents
   Never pure black; both themes share the same spacing and layout.

   Colour enters a rule through `--brand-*` (blue ramp), the semantic ramps
   (green/amber/red/blue/purple) or the `--ink-*` / surface tokens. Nothing
   below this file should carry a literal hex.
   ===================================================================== */

:root {
  /* brand ---------------------------------------------------------- */
  --brand-900: #0c1b3a;
  --brand-800: #1e3a8a;
  --brand-700: #1d4ed8;
  --brand-600: #2563eb;
  --brand-500: #3b82f6;
  --brand-400: #60a5fa;
  --brand-300: #93c5fd;
  --brand-200: #bfdbfe;
  --brand-100: #dbeafe;
  --brand-50:  #eff6ff;

  --indigo-600: #4f46e5;
  --indigo-500: #6366f1;
  --indigo-100: #e0e7ff;

  /* semantic ------------------------------------------------------- */
  --green-700: #065f46;
  --green-600: #047857;
  --green-500: #10b981;
  --green-100: #d1fae5;
  --amber-600: #b45309;
  --amber-500: #f59e0b;
  --amber-100: #fef3c7;
  --red-700:   #9f1239;
  --red-600:   #be123c;
  --red-500:   #f43f5e;
  --red-100:   #ffe4e6;
  --blue-600:  #1d4ed8;
  --blue-500:  #3b82f6;
  --blue-100:  #dbeafe;
  --purple-600:#4f46e5;
  --purple-500:#6366f1;
  --purple-100:#e0e7ff;

  /* surfaces (light) ----------------------------------------------- */
  --bg:            #f4f7fd;
  --bg-alt:        #eaf0fa;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --surface-3:     #eef2f8;
  --surface-inset: #f1f5f9;

  /* the page ground carries two soft colour blooms behind the shell */
  --bloom-1: rgba(59, 130, 246, .11);
  --bloom-2: rgba(99, 102, 241, .10);

  /* sidebar (light chrome) ------------------------------------------ */
  --sidebar-bg:     #ffffff;
  --sidebar-ink:    #475569;
  --sidebar-ink-strong: #0f172a;
  --sidebar-active: #eff6ff;
  --sidebar-active-ink: #1d4ed8;
  --sidebar-hover:  #f1f5f9;
  --sidebar-border: #e8edf6;
  --sidebar-label:  #94a3b8;
  --sidebar-scroll: #cbd5e1;
  --sidebar-scroll-hover: #94a3b8;
  --sidebar-brand-sub: #2563eb;
  --sidebar-quote-ink: #334155;
  --sidebar-glow: rgba(59, 130, 246, .10);

  --ink:        #1e293b;
  --ink-strong: #0f172a;
  --ink-muted:  #64748b;
  --ink-faint:  #94a3b8;
  --ink-invert: #ffffff;

  --border:        #e5eaf3;
  --border-strong: #cfd8e6;
  --border-soft:   #eef2f8;

  --accent:        var(--brand-500);
  --accent-ink:    var(--brand-700);
  --accent-soft:   var(--brand-50);
  --focus-ring:    rgba(59, 130, 246, .22);

  /* hover halos for the solid button variants (see base.css) */
  --ring-brand:   rgba(37, 99, 235, .26);
  --ring-danger:  rgba(190, 18, 60, .24);
  --ring-success: rgba(4, 120, 87, .24);
  --ring-neutral: rgba(15, 23, 42, .07);

  /* select / picker chevron, drawn in the same stroke style as the icon set */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow:    0 4px 14px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, .14), 0 4px 12px rgba(15, 23, 42, .07);

  /* geometry ------------------------------------------------------- */
  --r-xs: 5px;
  --r-sm: 8px;
  --r:    11px;
  --r-lg: 16px;
  --r-xl: 22px;

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

  --sidebar-w: 258px;
  --header-h: 62px;
  --bottomnav-h: 60px;

  --font: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-ur: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Nafees Nastaleeq', serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-arabic: 'Amiri', 'Traditional Arabic', serif;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 160ms;

  color-scheme: light;
}

[data-theme='dark'] {
  --bg:            #0a1122;
  --bg-alt:        #0e1830;
  --surface:       #111c33;
  --surface-2:     #16233d;
  --surface-3:     #1c2c4a;
  --surface-inset: #0e1930;

  --bloom-1: rgba(59, 130, 246, .13);
  --bloom-2: rgba(99, 102, 241, .12);

  --sidebar-bg:     #0c1527;
  --sidebar-ink:    #94a3b8;
  --sidebar-ink-strong: #f1f5f9;
  --sidebar-active: #16294d;
  --sidebar-active-ink: #93c5fd;
  --sidebar-hover:  #16233d;
  --sidebar-border: #1e2e4d;
  --sidebar-label:  #64748b;
  --sidebar-scroll: #2a3d61;
  --sidebar-scroll-hover: #3c5480;
  --sidebar-brand-sub: #60a5fa;
  --sidebar-quote-ink: #cbd5e1;
  --sidebar-glow: rgba(59, 130, 246, .16);

  --ink:        #e2e8f0;
  --ink-strong: #f8fafc;
  --ink-muted:  #94a3b8;
  --ink-faint:  #6b7c96;
  --ink-invert: #0a1122;

  --border:        #203152;
  --border-strong: #2c436d;
  --border-soft:   #1a2942;

  --accent:      var(--brand-400);
  --accent-ink:  var(--brand-300);
  --accent-soft: #16294d;
  --focus-ring:  rgba(96, 165, 250, .28);

  --ring-brand:   rgba(96, 165, 250, .30);
  --ring-danger:  rgba(251, 113, 133, .28);
  --ring-success: rgba(52, 211, 153, .26);
  --ring-neutral: rgba(148, 197, 253, .12);

  --green-500: #34d399;
  --green-100: #0c3028;
  --amber-500: #fbbf24;
  --amber-100: #36290c;
  --red-500:   #fb7185;
  --red-100:   #3a1520;
  --blue-500:  #60a5fa;
  --blue-100:  #15294a;
  --purple-500:#818cf8;
  --purple-100:#1d1f44;

  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 46px rgba(0, 0, 0, .58);

  color-scheme: dark;
}

/* status colour helpers used by badges, ledger cells and charts ------ */
:root {
  --st-paid-bg: var(--green-100);      --st-paid-ink: var(--green-600);
  --st-partial-bg: var(--amber-100);   --st-partial-ink: var(--amber-600);
  --st-unpaid-bg: var(--red-100);      --st-unpaid-ink: var(--red-600);
  --st-advance-bg: var(--blue-100);    --st-advance-ink: var(--blue-600);
  --st-exempt-bg: var(--surface-3);    --st-exempt-ink: var(--ink-muted);
  --st-adjust-bg: var(--purple-100);   --st-adjust-ink: var(--purple-600);
}

[data-theme='dark'] {
  --st-paid-ink: var(--green-500);
  --st-partial-ink: var(--amber-500);
  --st-unpaid-ink: var(--red-500);
  --st-advance-ink: var(--blue-500);
  --st-adjust-ink: var(--purple-500);
}

/* KPI tone tiles — pastel ground, saturated glyph ------------------- */
:root {
  --tone-navy-bg:  var(--brand-100);   --tone-navy-ink:  var(--brand-600);
  --tone-green-bg: var(--green-100);   --tone-green-ink: var(--green-600);
  --tone-red-bg:   var(--red-100);     --tone-red-ink:   var(--red-600);
  --tone-blue-bg:  var(--indigo-100);  --tone-blue-ink:  var(--indigo-600);
  --tone-amber-bg: var(--amber-100);   --tone-amber-ink: var(--amber-600);
}

[data-theme='dark'] {
  --tone-navy-bg:  #16294d;  --tone-navy-ink:  var(--brand-300);
  --tone-green-bg: #0c3028;  --tone-green-ink: var(--green-500);
  --tone-red-bg:   #3a1520;  --tone-red-ink:   var(--red-500);
  --tone-blue-bg:  #1d1f44;  --tone-blue-ink:  var(--purple-500);
  --tone-amber-bg: #36290c;  --tone-amber-ink: var(--amber-500);
}