/* =======================================================
   DESIGN SYSTEM – VARIABLES (GLOBAL)
   Opolska Liga Tenisa – 2025
   ======================================================= */

:root {

  /* =======================================================
     KOLORY
     ======================================================= */

  /* Tła */
  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;

  /* Linie / obramowania */
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;

  /* Kolory brandowe */
  --color-primary: #0056d6;          /* Mocny sportowy niebieski */
  --color-primary-dark: #003f99;
  --color-primary-soft: #e1ecff;

  --color-accent: #00b894;           /* Tenisowy zielony */
  --color-accent-soft: #e0fff6;

  /* Tekst */
  --color-text-main: #111827;
  --color-text-muted: #6b7280;
  --color-text-soft: #9ca3af;

  /* Hero overlay */
  --color-hero-overlay: rgba(0, 0, 0, 0.45);

  /* =======================================================
     TYPOGRAFIA
     ======================================================= */

  --font-main: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  /* =======================================================
     SPACING SYSTEM (GLOBALNY)
     ======================================================= */

  --space-xxs: 6px;
  --space-xs: 10px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-xxl: 96px;

  /* =======================================================
     LAYOUT
     ======================================================= */

  --container-max: 1320px;
  --container-padding-x: 20px;
  --section-padding-y: var(--space-xl);

  /* =======================================================
     ROUNDED / RADIUS
     ======================================================= */

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  /* =======================================================
     CIENIE
     ======================================================= */

  --shadow-soft: 0 14px 30px rgba(15, 23, 42, 0.12);
  --shadow-hover: 0 20px 45px rgba(15, 23, 42, 0.16);

  /* =======================================================
     NAVIGATION
     ======================================================= */

  --nav-height: 72px;
  --transition-fast: 0.18s ease;

}