:root {
  /*
  |--------------------------------------------------------------------------
  | Kolory marki
  |--------------------------------------------------------------------------
  */

  --site-primary: #00f2ff;
  --site-primary-rgb: 0, 242, 255;
  --site-primary-dark: #00aebb;
  --site-primary-soft: rgba(0, 242, 255, 0.1);
  --site-primary-softer: rgba(0, 242, 255, 0.06);
  --site-primary-border: rgba(0, 242, 255, 0.3);
  --site-primary-shadow: rgba(0, 242, 255, 0.18);

  --site-secondary: #5e6ad2;
  --site-secondary-rgb: 94, 106, 210;
  --site-secondary-dark: #404aaf;
  --site-secondary-soft: rgba(94, 106, 210, 0.14);
  --site-secondary-softer: rgba(94, 106, 210, 0.08);

  --site-accent: #fed83a;
  --site-accent-rgb: 254, 216, 58;
  --site-accent-dark: #d2aa00;
  --site-accent-soft: rgba(254, 216, 58, 0.12);

  --site-neutral: #707979;
  --site-neutral-rgb: 112, 121, 121;

  /*
  |--------------------------------------------------------------------------
  | Kolory semantyczne
  |--------------------------------------------------------------------------
  */

  --site-success: #42d992;
  --site-success-rgb: 66, 217, 146;
  --site-success-soft: rgba(66, 217, 146, 0.08);
  --site-success-border: rgba(66, 217, 146, 0.24);

  --site-danger: #ff6a7a;
  --site-danger-rgb: 255, 106, 122;
  --site-danger-soft: rgba(255, 106, 122, 0.08);
  --site-danger-border: rgba(255, 106, 122, 0.24);

  --site-warning: #fed83a;
  --site-warning-rgb: 254, 216, 58;
  --site-warning-soft: rgba(254, 216, 58, 0.1);
  --site-warning-border: rgba(254, 216, 58, 0.24);

  --site-info: #00f2ff;
  --site-info-rgb: 0, 242, 255;
  --site-info-soft: rgba(0, 242, 255, 0.08);
  --site-info-border: rgba(0, 242, 255, 0.24);

  /*
  |--------------------------------------------------------------------------
  | Tła
  |--------------------------------------------------------------------------
  */

  --site-bg: #05090d;
  --site-bg-deep: #030609;
  --site-bg-soft: #091017;
  --site-bg-elevated: #0d151d;
  --site-bg-card: #101a24;
  --site-bg-card-hover: #13212d;

  --site-surface: rgba(255, 255, 255, 0.045);
  --site-surface-soft: rgba(255, 255, 255, 0.025);
  --site-surface-strong: rgba(255, 255, 255, 0.075);
  --site-surface-hover: rgba(255, 255, 255, 0.095);

  --site-overlay-light: rgba(5, 9, 13, 0.28);
  --site-overlay-medium: rgba(5, 9, 13, 0.72);
  --site-overlay-strong: rgba(5, 9, 13, 0.92);
  --site-overlay-full: rgba(5, 9, 13, 0.98);

  /*
  |--------------------------------------------------------------------------
  | Tekst
  |--------------------------------------------------------------------------
  */

  --site-text: #f7fbfc;
  --site-text-soft: #ced8dc;
  --site-text-inverse: #001014;

  --site-muted: #8f9ca2;
  --site-muted-light: #aab5ba;
  --site-muted-dark: #707979;

  /*
  |--------------------------------------------------------------------------
  | Obramowania
  |--------------------------------------------------------------------------
  */

  --site-border: rgba(255, 255, 255, 0.1);
  --site-border-soft: rgba(255, 255, 255, 0.065);
  --site-border-strong: rgba(255, 255, 255, 0.17);
  --site-border-primary: rgba(0, 242, 255, 0.3);

  /*
  |--------------------------------------------------------------------------
  | Typografia
  |--------------------------------------------------------------------------
  */

  --site-font-heading:
    "Sora", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --site-font-body:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --site-font-label:
    "Geist", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;

  --site-font-size-body: 16px;
  --site-line-height-body: 1.7;

  --site-font-weight-regular: 400;
  --site-font-weight-medium: 500;
  --site-font-weight-semibold: 650;
  --site-font-weight-bold: 700;
  --site-font-weight-extrabold: 800;

  /*
  |--------------------------------------------------------------------------
  | Układ
  |--------------------------------------------------------------------------
  */

  --site-header-height: 92px;

  --site-container: 1280px;
  --site-container-wide: 1460px;
  --site-container-narrow: 920px;

  --site-gutter: clamp(20px, 4vw, 56px);

  --site-section-space: clamp(76px, 9vw, 140px);

  --site-section-space-small: clamp(58px, 7vw, 100px);

  /*
  |--------------------------------------------------------------------------
  | Odstępy
  |--------------------------------------------------------------------------
  */

  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 12px;
  --site-space-4: 16px;
  --site-space-5: 20px;
  --site-space-6: 24px;
  --site-space-7: 28px;
  --site-space-8: 32px;
  --site-space-9: 40px;
  --site-space-10: 48px;
  --site-space-11: 56px;
  --site-space-12: 64px;

  /*
  |--------------------------------------------------------------------------
  | Promienie
  |--------------------------------------------------------------------------
  */

  --site-radius-xs: 6px;
  --site-radius-small: 10px;
  --site-radius-medium: 14px;
  --site-radius: 18px;
  --site-radius-large: 30px;
  --site-radius-pill: 999px;
  --site-radius-circle: 50%;

  /*
  |--------------------------------------------------------------------------
  | Cienie
  |--------------------------------------------------------------------------
  */

  --site-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);

  --site-shadow-small: 0 14px 40px rgba(0, 0, 0, 0.18);

  --site-shadow-card: 0 20px 55px rgba(0, 0, 0, 0.22);

  --site-shadow-primary: 0 14px 38px rgba(0, 242, 255, 0.24);

  --site-shadow-header: 0 14px 42px rgba(0, 0, 0, 0.16);

  /*
  |--------------------------------------------------------------------------
  | Przejścia
  |--------------------------------------------------------------------------
  */

  --site-transition: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --site-transition-fast: 120ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --site-transition-slow: 420ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --site-transition-image: 700ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /*
  |--------------------------------------------------------------------------
  | Warstwy
  |--------------------------------------------------------------------------
  */

  --site-z-content: 1;
  --site-z-dropdown: 30;
  --site-z-mobile-menu: 990;
  --site-z-header: 1000;
  --site-z-overlay: 1100;
  --site-z-modal: 1200;
  --site-z-toast: 1300;
  --site-z-skip-link: 9999;
}