/* ============================================================================
   MTC Clergy Directory — Design System Variables
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

:root {
  /* ── Primary Colors ── */
  --color-navy:        #0a1628;
  --color-navy-light:  #152238;
  --color-navy-mid:    #1e3050;
  --color-gold:        #c9a84c;
  --color-gold-light:  #dfc06e;
  --color-gold-dark:   #a88a35;
  --color-burgundy:    #8b1a2b;
  --color-burgundy-light: #a82e42;

  /* ── Neutrals ── */
  --color-white:       #ffffff;
  --color-gray-50:     #f8f9fb;
  --color-gray-100:    #f0f2f5;
  --color-gray-200:    #e4e7ec;
  --color-gray-300:    #d1d5db;
  --color-gray-400:    #9ca3af;
  --color-gray-500:    #6b7280;
  --color-gray-600:    #4b5563;
  --color-gray-700:    #374151;
  --color-gray-800:    #1f2937;
  --color-gray-900:    #111827;

  /* ── Semantic ── */
  --color-success:     #10b981;
  --color-success-bg:  #ecfdf5;
  --color-warning:     #f59e0b;
  --color-warning-bg:  #fffbeb;
  --color-danger:      #ef4444;
  --color-danger-bg:   #fef2f2;
  --color-info:        #3b82f6;
  --color-info-bg:     #eff6ff;

  /* ── Typography ── */
  --font-body:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading:      'Playfair Display', Georgia, serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  /* ── Spacing ── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

  /* ── Borders ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.06);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.06);
  --shadow-glow: 0 0 20px rgba(201,168,76,0.3);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --sidebar-width:     260px;
  --header-height:     64px;
  --max-content-width: 1280px;
}