/* =========================================================================
   Foreningsliv — Design tokens
   Drop-in CSS-variabler. Inkluderes før style.css.
   ========================================================================= */

:root {
  /* ---------- Brand grøn ---------- */
  --fl-brand:        #047857;  /* primary-600 — den vigtigste */
  --fl-brand-hover:  #15803d;  /* primary-700 — hover */
  --fl-brand-light:  #059669;  /* primary-500 — logo, gradient start */
  --fl-brand-dark:   #166534;  /* primary-800 */

  --fl-primary-50:   #f0fdf4;
  --fl-primary-100:  #dcfce7;
  --fl-primary-200:  #bbf7d0;
  --fl-primary-300:  #86efac;
  --fl-primary-400:  #4ade80;
  --fl-primary-500:  #059669;
  --fl-primary-600:  #047857;
  --fl-primary-700:  #15803d;
  --fl-primary-800:  #166534;
  --fl-primary-900:  #14532d;

  /* ---------- Neutral ---------- */
  --fl-gray-50:  #f9fafb;
  --fl-gray-100: #f3f4f6;
  --fl-gray-200: #e5e7eb;
  --fl-gray-300: #d1d5db;
  --fl-gray-400: #9ca3af;
  --fl-gray-500: #6b7280;
  --fl-gray-600: #4b5563;
  --fl-gray-700: #374151;
  --fl-gray-800: #1f2937;
  --fl-gray-900: #111827;

  /* ---------- Accent (kun små doser) ---------- */
  --fl-amber-50:  #fffbeb;
  --fl-amber-100: #fef3c7;
  --fl-amber-600: #d97706;
  --fl-amber-700: #b45309;

  --fl-info-50:   #eff6ff;
  --fl-info-100:  #dbeafe;
  --fl-info-600:  #2563eb;
  --fl-info-700:  #1d4ed8;

  --fl-teal-50:   #f0fdfa;
  --fl-teal-600:  #0d9488;

  --fl-warning-600: #d97706;

  /* ---------- Semantic role tokens ---------- */
  --fl-bg:           #ffffff;
  --fl-fg-primary:   #1f2937;
  --fl-fg-secondary: #4b5563;
  --fl-fg-muted:     #6b7280;
  --fl-fg-heading:   #111827;
  --fl-fg-link:      var(--fl-brand);
  --fl-border:       #e5e7eb;

  /* ---------- Typografi ---------- */
  --fl-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --fl-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;

  /* ---------- Radius ---------- */
  --fl-radius-sm:   6px;
  --fl-radius-md:   10px;
  --fl-radius-lg:   12px;
  --fl-radius-xl:   16px;
  --fl-radius-2xl:  24px;

  /* ---------- Shadows ---------- */
  --fl-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --fl-shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --fl-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.05);
  --fl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --fl-shadow-xl: 0 18px 36px -10px rgba(15,33,56,0.18), 0 0 0 1px rgba(15,33,56,0.04);
  --fl-shadow-cta: 0 8px 20px rgba(5,150,105,0.28);

  /* ---------- Motion ---------- */
  --fl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fl-dur-fast: 180ms;
  --fl-dur-base: 300ms;
  --fl-dur-slow: 500ms;
}