/* ============================================================
   DESIGN TOKENS — Unified Aid, Grant & Event Management Platform
   Single source of truth. Tenant accent switches via [data-tenant].
   ============================================================ */

/* Fonts: Plus Jakarta Sans (display) + Inter (body) — pairs for modern SaaS */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Neutral scale ---------- */
  --gray-0:  #ffffff;
  --gray-50: #f7f8fa;
  --gray-100:#eef0f3;
  --gray-200:#e2e5ea;
  --gray-300:#ccd1d9;
  --gray-400:#a3abb7;
  --gray-500:#6f7885;
  --gray-600:#4b5563;
  --gray-700:#323a47;
  --gray-800:#1f2633;
  --gray-900:#0f1420;

  /* ---------- Surface + text (semantic aliases) ---------- */
  --bg-app:       var(--gray-50);
  --bg-surface:   var(--gray-0);
  --bg-subtle:    var(--gray-100);
  --bg-muted:     var(--gray-200);
  --border:       var(--gray-200);
  --border-strong:var(--gray-300);
  --text:         var(--gray-900);
  --text-muted:   var(--gray-600);
  --text-subtle:  var(--gray-500);
  --text-inverse: var(--gray-0);

  /* ---------- Semantic status ---------- */
  --success-50:  #e7f6ec;
  --success-100: #c6ead0;
  --success-600: #1a8a3f;
  --success-700: #0f6b30;

  --warning-50:  #fff6e0;
  --warning-100: #ffe2a8;
  --warning-600: #b8740b;
  --warning-700: #8f5806;

  --danger-50:  #fdecec;
  --danger-100: #f8c9c9;
  --danger-600: #c53030;
  --danger-700: #9b1c1c;

  --info-50:  #e8f1fc;
  --info-100: #c9dcf6;
  --info-600: #1f6feb;
  --info-700: #144ea8;

  --neutral-chip-bg: var(--gray-100);
  --neutral-chip-fg: var(--gray-700);

  /* ---------- Brand (overridden per tenant below) ---------- */
  --brand-50:  #e8f1fc;
  --brand-100: #c9dcf6;
  --brand-300: #6ea4ef;
  --brand-500: #2f7fe8;
  --brand-600: #1f6feb;
  --brand-700: #144ea8;
  --brand-800: #0d3880;
  --brand-contrast: #ffffff;

  /* ---------- Typography ---------- */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Modular scale 1.25 — major third */
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px;
  --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px;
  --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.45;
  --lh-body: 1.6;

  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Tighten display; loosen caps */
  --ls-tight: -0.02em;
  --ls-display: -0.025em;
  --ls-display-lg: -0.035em;
  --ls-caps: 0.06em;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --sp-9:48px; --sp-10:64px; --sp-11:80px; --sp-12:96px;

  /* ---------- Radius ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ---------- Shadow — multi-layered for realistic depth ---------- */
  --shadow-xs: 0 1px 2px hsl(220 30% 10% / 0.04);
  --shadow-sm:
    0 1px 2px hsl(220 30% 10% / 0.04),
    0 2px 4px hsl(220 30% 10% / 0.04);
  --shadow-md:
    0 1px 2px hsl(220 30% 10% / 0.04),
    0 6px 12px hsl(220 30% 10% / 0.06),
    0 2px 6px hsl(220 30% 10% / 0.04);
  --shadow-lg:
    0 2px 4px hsl(220 30% 10% / 0.04),
    0 16px 32px hsl(220 30% 10% / 0.10),
    0 4px 12px hsl(220 30% 10% / 0.06);
  --shadow-xl:
    0 4px 8px hsl(220 30% 10% / 0.04),
    0 24px 48px hsl(220 30% 10% / 0.14),
    0 10px 20px hsl(220 30% 10% / 0.08);

  /* Coloured brand shadow for focus */
  --shadow-brand: 0 8px 24px hsl(from var(--brand-600) h s l / 0.25);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-swift:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  280ms;
  --dur-slow: 450ms;
  --dur-xslow: 700ms;

  /* ---------- Layout constants ---------- */
  --sidebar-w: 248px;
  --topbar-h: 60px;
  --container-max: 1280px;

  /* ---------- Status chip mapping ---------- */
  --chip-draft-bg:     var(--gray-100);   --chip-draft-fg:     var(--gray-700);
  --chip-progress-bg:  var(--info-50);    --chip-progress-fg:  var(--info-700);
  --chip-blocked-bg:   var(--danger-50);  --chip-blocked-fg:   var(--danger-700);
  --chip-approved-bg:  var(--success-50); --chip-approved-fg:  var(--success-700);
  --chip-disbursed-bg: #eef4ff;           --chip-disbursed-fg: #1e3a8a;
  --chip-closed-bg:    #f1ecff;           --chip-closed-fg:    #5b3fb4;
  --chip-warning-bg:   var(--warning-50); --chip-warning-fg:   var(--warning-700);
}

/* ============================================================
   Tenant theming — switch via <html data-tenant="...">
   ============================================================ */

html[data-tenant="political"] {
  --brand-50:  #fbeceb;
  --brand-100: #f6cdc9;
  --brand-300: #db7a72;
  --brand-500: #c24a41;
  --brand-600: #b8362e;
  --brand-700: #8e2822;
  --brand-800: #691c18;
  --brand-contrast: #ffffff;
}

html[data-tenant="temple"] {
  --brand-50:  #fcf3de;
  --brand-100: #f7e1ab;
  --brand-300: #e1b155;
  --brand-500: #cc951f;
  --brand-600: #c48a1c;
  --brand-700: #966814;
  --brand-800: #6c4a0e;
  --brand-contrast: #ffffff;
}

html[data-tenant="ngo"] {
  --brand-50:  #e8f1fc;
  --brand-100: #c9dcf6;
  --brand-300: #6ea4ef;
  --brand-500: #2f7fe8;
  --brand-600: #1f6feb;
  --brand-700: #144ea8;
  --brand-800: #0d3880;
  --brand-contrast: #ffffff;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med:  0ms;
    --dur-slow: 0ms;
  }
}