/* ============================================================
   Design Tokens — grzesiak24.pl
   Jeden plik z wszystkimi zmiennymi.
   Zmiana koloru akcentu = zmiana w jednym miejscu.
   ============================================================ */

:root {
  /* ── Kolory tła ────────────────────────────────────── */
  --bg-primary:       #0F1117;
  --bg-secondary:     #161821;
  --bg-card:          #1C1E2A;
  --bg-card-hover:    #22243A;
  --bg-elevated:      #1A1C28;

  /* ── Kolory tekstu ─────────────────────────────────── */
  --text-primary:     #E8E9ED;
  --text-secondary:   #9498A8;
  --text-muted:       #5A5E70;
  --text-inverse:     #0F1117;

  /* ── Akcent ────────────────────────────────────────── */
  --accent:           #6C8EBF;
  --accent-hover:     #7DA0D1;
  --accent-subtle:    rgba(108, 142, 191, 0.10);
  --accent-glow:      rgba(108, 142, 191, 0.05);

  /* ── Obramowania ───────────────────────────────────── */
  --border:           #2A2D3A;
  --border-hover:     #3A3E50;
  --border-accent:    rgba(108, 142, 191, 0.25);

  /* ── Typografia ────────────────────────────────────── */
  --font-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:        'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --fs-xs:            0.75rem;    /* 12px */
  --fs-sm:            0.875rem;   /* 14px */
  --fs-base:          1rem;       /* 16px */
  --fs-md:            1.125rem;   /* 18px */
  --fs-lg:            1.25rem;    /* 20px */
  --fs-xl:            1.5rem;     /* 24px */
  --fs-2xl:           2rem;       /* 32px */
  --fs-3xl:           2.5rem;     /* 40px */
  --fs-4xl:           3.25rem;    /* 52px */

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

  --lh-tight:         1.2;
  --lh-normal:        1.6;
  --lh-relaxed:       1.8;

  /* ── Spacing ───────────────────────────────────────── */
  --space-xs:         0.25rem;    /* 4px */
  --space-sm:         0.5rem;     /* 8px */
  --space-md:         1rem;       /* 16px */
  --space-lg:         1.5rem;     /* 24px */
  --space-xl:         2rem;       /* 32px */
  --space-2xl:        3rem;       /* 48px */
  --space-3xl:        4rem;       /* 64px */
  --space-4xl:        6rem;       /* 96px */
  --space-5xl:        8rem;       /* 128px */

  /* ── Border radius ─────────────────────────────────── */
  --radius-sm:        4px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-full:      9999px;

  /* ── Shadows ───────────────────────────────────────── */
  --shadow-sm:        0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.5);
  --shadow-accent:    0 4px 20px rgba(108, 142, 191, 0.15);

  /* ── Transitions ───────────────────────────────────── */
  --transition-fast:  0.15s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.4s ease;

  /* ── Layout ────────────────────────────────────────── */
  --container-max:    1140px;
  --container-padding: var(--space-lg);
  --nav-height:       72px;
}