/* ============================================
   Fundacja Jamniczek — Design Tokens
   Paleta, typografia, spacing, animacje
   ============================================ */

:root {
  /* === Tło === */
  --bg-primary: #0e1418;
  --bg-elevated: #151c20;
  --bg-card: #1a2228;
  --bg-form: #2d4a35;

  /* === Header === */
  --header-bg: #1f3a26;
  --header-border: #2a4a32;

  /* === Akcenty zielone === */
  --accent-green: #7cc97a;
  --accent-green-soft: #9fd99d;
  --accent-green-glow: rgba(124, 201, 122, 0.15);

  /* === Akcenty fioletowo-niebieskie === */
  --accent-step: #8b9eff;
  --accent-step-bg: rgba(139, 158, 255, 0.08);

  /* === Tekst === */
  --text-primary: #ffffff;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-on-green: #0e1418;

  /* === Stany === */
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(124, 201, 122, 0.4);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 8px 32px rgba(124, 201, 122, 0.15);

  /* === Heart / 1,5% === */
  --heart-bg: rgba(124, 201, 122, 0.12);
  --heart-text: #7cc97a;

  /* === Kolory funkcyjne === */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.1);

  /* === Typografia === */
  --font-sans: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', sans-serif;

  --fs-h1: clamp(2.25rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === Spacing === */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;

  /* === Radius === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* === Container === */
  --container-max: 1600px;
  --container-narrow: 760px;
  --container-padding: clamp(1rem, 4vw, 2rem);

  /* === Animacje === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* === Tła dekoracyjne === */
  --bg-paws: url('/assets/img/paw-pattern.svg');

  /* === Layout === */
  --header-height: 72px;
  --z-header: 100;
  --z-modal: 200;
  --z-cookie: 150;
  --z-toast: 300;
}

/* === Breakpointy (do reference; w mediach piszemy bezpośrednio) === */
/*
  --bp-sm: 640px
  --bp-md: 768px
  --bp-lg: 1024px
  --bp-xl: 1280px
*/