/* =====================================================================
   FWF MIS — DESIGN SYSTEM / CSS VARIABLES
   Source of truth for all colors, spacing, radii, shadows, typography.

   BRANDING NOTE:
   These values were sampled directly from the official FWF logo (the
   running-figure mark with red motion ribbon and navy wordmark) supplied
   by the client — not guessed. Primary = logo purple, accent = logo red,
   ink = logo navy. If the live website's on-page palette ever differs
   from the logo (e.g. a lighter purple used for buttons), adjust the
   hex values below — every color in the whole system flows from these
   variables, nothing is hard-coded elsewhere.
   ===================================================================== */

:root {
  /* ---------- BRAND PRIMARY (logo purple — the running figure) ---------- */
  --fwf-primary: #6d2077;
  --fwf-primary-dark: #4f1758;
  --fwf-primary-light: #8a3a94;
  --fwf-primary-50: #f5eef6;
  --fwf-primary-100: #e6d2e9;

  /* ---------- BRAND SECONDARY (logo red — the motion ribbon) ---------- */
  --fwf-gold: #e51c24;
  --fwf-gold-dark: #b81118;
  --fwf-gold-light: #ef4b52;
  --fwf-gold-50: #fdeced;

  /* ---------- NEUTRALS ---------- */
  --fwf-navy-ink: #2b2a6b;      /* headings — logo wordmark navy */
  --fwf-text: #33324a;          /* body text */
  --fwf-text-muted: #6b7280;
  --fwf-border: #e6e2ea;
  --fwf-bg: #f7f6fa;            /* cool-neutral off-white, not clinical white */
  --fwf-surface: #ffffff;
  --fwf-sidebar-bg: #2c1030;    /* deep purple-black, near primary-dark */
  --fwf-sidebar-text: #e4d9e6;
  --fwf-sidebar-text-muted: #b7a2ba;
  --fwf-sidebar-active: #6d2077;

  /* ---------- SEMANTIC / STATUS ---------- */
  --fwf-success: #2f8a52;
  --fwf-success-bg: #e7f6ec;
  --fwf-warning: #b8860b;
  --fwf-warning-bg: #fdf3d9;
  --fwf-danger: #c0392b;
  --fwf-danger-bg: #fdeae7;
  --fwf-info: #2b6ec0;
  --fwf-info-bg: #e8f1fb;

  /* ---------- TYPOGRAPHY ---------- */
  --fwf-font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --fwf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fwf-fs-base: 15px;

  /* ---------- SPACING SCALE ---------- */
  --fwf-space-1: 4px;
  --fwf-space-2: 8px;
  --fwf-space-3: 12px;
  --fwf-space-4: 16px;
  --fwf-space-5: 24px;
  --fwf-space-6: 32px;
  --fwf-space-7: 48px;

  /* ---------- RADIUS ---------- */
  --fwf-radius-sm: 6px;
  --fwf-radius-md: 10px;
  --fwf-radius-lg: 16px;
  --fwf-radius-pill: 999px;

  /* ---------- SHADOWS (soft, warm, low-contrast — premium not flat) ---------- */
  --fwf-shadow-sm: 0 1px 2px rgba(31, 20, 12, 0.06);
  --fwf-shadow-md: 0 4px 14px rgba(31, 20, 12, 0.08);
  --fwf-shadow-lg: 0 12px 32px rgba(31, 20, 12, 0.12);

  /* ---------- LAYOUT ---------- */
  --fwf-sidebar-width: 264px;
  --fwf-sidebar-width-collapsed: 76px;
  --fwf-topbar-height: 64px;
  --fwf-transition: all 0.18s ease-in-out;
}