/* ==========================================================================
   variables.css — design tokens
   Jedyne miejsce, w którym definiujemy kolory, skalę typograficzną i odstępy.
   ========================================================================== */

:root {
  /* --- kolory ------------------------------------------------------------ */
  /* Kolor firmowy Roger Preston (#11175E) pochodzi z obecnej witryny
     rogerpreston.pl. Cała rodzina ciemnych kolorów jest z niego wyprowadzona
     — ten sam odcień (~233°), zejście w dół jasności dla dużych powierzchni. */
  --color-brand:       #11175E;   /* kolor firmowy — akcent, przyciski, obrysy */

  --color-navy:        #101432;   /* główny granat — sekcje ciemne, header */
  --color-navy-deep:   #090B20;   /* najciemniejszy — stopka, overlaye */
  --color-navy-soft:   #292E51;   /* linie i separatory na ciemnym tle */
  --color-graphite:    #1B1D26;

  --color-ink:         #12141C;   /* tekst podstawowy na jasnym tle */
  --color-text:        #2C313C;   /* tekst ciągły */
  --color-muted:       #6B7280;   /* tekst pomocniczy */
  --color-muted-dark:  #9DA3BE;   /* tekst pomocniczy na ciemnym tle */

  --color-bg:          #FFFFFF;
  --color-bg-alt:      #F4F5F7;   /* jasna sekcja neutralna */
  --color-bg-tint:     #FAFAFC;

  --color-line:        #E4E5EA;   /* linie na jasnym tle */
  --color-line-strong: #C9CCD6;
  --color-line-dark:   rgba(255, 255, 255, 0.14);

  --color-accent:      var(--color-brand);  /* stany interaktywne */
  --color-focus:       #5465D4;             /* obrys focus — jaśniejszy wariant firmowego */
  --color-todo:        #9F6B23;             /* oznaczenia „do uzupełnienia” */

  --overlay-hero: linear-gradient(
      100deg,
      rgba(9, 11, 32, 0.86) 0%,
      rgba(9, 11, 32, 0.66) 42%,
      rgba(9, 11, 32, 0.30) 100%);
  --overlay-card: linear-gradient(
      180deg,
      rgba(9, 11, 32, 0) 35%,
      rgba(9, 11, 32, 0.78) 100%);

  /* --- typografia -------------------------------------------------------- */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial,
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero:     clamp(2.25rem, 4.4vw, 4.75rem);
  --fs-display:  clamp(2.125rem, 4.6vw, 4rem);
  --fs-h1:       clamp(1.875rem, 3.6vw, 3.25rem);
  --fs-h2:       clamp(1.5rem, 2.6vw, 2.25rem);
  --fs-h3:       clamp(1.125rem, 1.6vw, 1.5rem);
  --fs-stat:     clamp(1.625rem, 2.3vw, 2.25rem);
  --fs-lead:     clamp(1rem, 1.15vw, 1.1875rem);
  --fs-body:     1rem;
  --fs-sm:       0.9375rem;
  --fs-xs:       0.8125rem;
  --fs-label:    0.6875rem;     /* etykiety wersalikowe */

  --lh-tight:   1.06;
  --lh-heading: 1.18;
  --lh-body:    1.65;

  --ls-hero:   -0.025em;
  --ls-title:  -0.01em;
  --ls-label:   0.16em;
  --ls-nav:     0.09em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* --- siatka i odstępy --------------------------------------------------- */
  --container-max: 1600px;
  --container-narrow: 1120px;
  --gutter: clamp(1.25rem, 3.2vw, 3.5rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  --section-y: clamp(3.5rem, 7vw, 7.5rem);
  --grid-gap:  clamp(0.75rem, 1.1vw, 1.25rem);

  --header-h: 88px;

  /* --- ruch --------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;
}

@media (max-width: 768px) {
  :root { --header-h: 68px; }
}