:root {
  /* === KOLORY === */

  /* Brand primary */
  --kotler-blue-50:  #e6f2fe;
  --kotler-blue-100: #cce5fd;
  --kotler-blue-200: #99cbfb;
  --kotler-blue-300: #66b1f9;
  --kotler-blue-400: #4da3f9;
  --kotler-blue-500: #0080f6;
  --kotler-blue-600: #0066c4;
  --kotler-blue-700: #004d93;
  --kotler-blue-800: #003362;
  --kotler-blue-900: #001a31;
  --kotler-blue: var(--kotler-blue-500);

  /* Backgrounds */
  --kotler-bg:      #fafaf7;
  --kotler-paper:   #ffffff;
  --kotler-bg-warm: #f5f1ea;

  /* Dark sections */
  --kotler-ink:      #0a1628;
  --kotler-ink-soft: #1a2438;
  --kotler-ink-deep: #050b14;

  /* Text */
  --kotler-text:       #0a0a0a;
  --kotler-text-soft:  #3a3a3a;
  --kotler-text-mute:  #707070;
  --kotler-text-faint: #a0a0a0;

  /* On-dark text */
  --kotler-text-dark:      #ffffff;
  --kotler-text-dark-soft: rgba(255, 255, 255, 0.72);
  --kotler-text-dark-mute: rgba(255, 255, 255, 0.48);

  /* Borders */
  --kotler-border:             rgba(10, 22, 40, 0.08);
  --kotler-border-strong:      rgba(10, 22, 40, 0.16);
  --kotler-border-dark:        rgba(255, 255, 255, 0.08);
  --kotler-border-dark-strong: rgba(255, 255, 255, 0.14);

  /* On-dark aliases (sekcje dark) */
  --kotler-text-on-dark:          var(--kotler-text-dark);
  --kotler-text-on-dark-mute:     var(--kotler-text-dark-mute);
  --kotler-border-on-dark:        var(--kotler-border-dark);
  --kotler-border-on-dark-strong: var(--kotler-border-dark-strong);

  /* === TYPOGRAFIA === */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Geist', system-ui, sans-serif;

  /* Type scale — agresywna clamp() */
  --text-xs:   clamp(0.72rem,  0.7rem  + 0.10vw, 0.78rem);
  --text-sm:   clamp(0.85rem,  0.82rem + 0.15vw, 0.92rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.08rem);
  --text-lg:   clamp(1.12rem,  1.05rem + 0.35vw, 1.25rem);
  --text-xl:   clamp(1.3rem,   1.2rem  + 0.50vw, 1.5rem);
  --text-2xl:  clamp(1.6rem,   1.4rem  + 1.00vw, 2rem);
  --text-3xl:  clamp(2rem,     1.7rem  + 1.50vw, 2.75rem);
  --text-4xl:  clamp(2.5rem,   2rem    + 2.50vw, 3.75rem);
  --text-5xl:  clamp(3rem,     2.4rem  + 3.00vw, 4.5rem);
  --text-6xl:  clamp(3.6rem,   2.8rem  + 4.00vw, 6rem);
  --text-7xl:  clamp(4.5rem,   3.2rem  + 6.50vw, 8rem);
  --text-8xl:  clamp(5.5rem,   3.8rem  + 8.50vw, 10rem);

  /* Letter spacing */
  --tracking-tightest: -0.07em;
  --tracking-tighter:  -0.05em;
  --tracking-tight:    -0.03em;
  --tracking-normal:    0;
  --tracking-wide:      0.04em;
  --tracking-wider:     0.08em;
  --tracking-widest:    0.16em;

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Section padding */
  --section-padding-y:       clamp(5rem,  8vw,  8rem);
  --section-padding-y-tight: clamp(3rem,  5vw,  5rem);
  --section-padding-y-wide:  clamp(7rem, 11vw, 11rem);

  /* Container */
  --container-max:     1400px;
  --container-padding: clamp(1.25rem, 3vw, 2.5rem);

  /* Legacy aliases (backwards compat with existing code) */
  --container-padding-mobile:  1.25rem;
  --container-padding-desktop: 2.5rem;

  /* Header height (for sticky element offsets) - desktop default 88px, mobile 64px.
     Wartość dynamicznie aktualizowana przez assets/js/header.js przy load/resize/scroll
     (header shrinkuje 88→64 po scroll przez class .is-scrolled). */
  --header-height: 88px;

  /* Border radius */
  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-lg:   1.5rem;
  --radius-xl:   2rem;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm:        0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-md:        0 4px 16px rgba(10, 22, 40, 0.06);
  --shadow-lg:        0 12px 40px rgba(10, 22, 40, 0.08);
  --shadow-xl:        0 24px 80px rgba(10, 22, 40, 0.12);
  --shadow-glow-blue: 0 0 0 1px rgba(0, 128, 246, 0.12), 0 8px 32px rgba(0, 128, 246, 0.16);

  /* Easing */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

  /* Duration */
  --duration-fast: 200ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;

  /* === SUBTLE DECORATIVE (visual continuity across sections) === */
  --kotler-grid-light:     rgba(10, 22, 40, 0.04);
  --kotler-grid-dark:      rgba(255, 255, 255, 0.014);
  --kotler-glow-blue:      rgba(0, 128, 246, 0.06);
  --kotler-glow-blue-dark: rgba(0, 128, 246, 0.08);
  --kotler-section-divider: linear-gradient(
    90deg,
    transparent 0%,
    transparent 30%,
    rgba(0, 128, 246, 0.18) 50%,
    transparent 70%,
    transparent 100%
  );
}

@media (max-width: 979px) {
  :root {
    --header-height: 64px;
  }
}