/* ============================================================
   RecepcjaAI24 — DESIGN SYSTEM (Faza 0)
   Jeden wspólny zestaw tokenów dla WSZYSTKICH podstron.
   Kierunek: ciemny premium-tech, jeden akcent #007aff, restraint.
   Statyczny hosting — zwykły <link>, bez build stepu.
   ============================================================ */

:root {
  /* --- KOLOR MARKI (jeden akcent) --------------------------- */
  --brand:         #007aff;   /* podstawowy akcent — CTA, highlighty */
  --brand-bright:  #007aff;   /* zrównany z --brand (decyzja Pity - bez przeskoku jasności akcentów) */
  --brand-deep:    #0052cc;   /* ciemniejszy — dolny róg gradientu CTA */
  --brand-tint:    rgba(0,122,255,.08);  /* ledwo widoczne wypełnienia */
  --brand-line:    rgba(0,122,255,.28);  /* obramowania akcentowe */
  --brand-glow:    rgba(0,122,255,.35);  /* poświata / box-shadow */

  /* --- NEUTRALNE / TŁA (ciemny, lekko chłodny — nie pure #000) */
  --bg:            #06070a;   /* baza strony */
  --bg-raised:     #0c0e13;   /* uniesiona powierzchnia (sekcje) */
  --bg-card:       #0e1118;   /* karty */
  --surface:       rgba(255,255,255,.025); /* płaskie tło zamiast szkła */
  --surface-hover: rgba(255,255,255,.05);

  /* Hairline — cienka linia zamiast ciężkiego blur/szkła */
  --hairline:        rgba(255,255,255,.08);
  --hairline-strong: rgba(255,255,255,.14);

  /* --- TEKST (biel złamana = premium, nie #fff w pałę) ------ */
  --text:        #f3f5fa;
  --text-muted:  #9aa3b2;
  --text-faint:  #6b7280;

  /* --- TYPOGRAFIA ------------------------------------------- */
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Nagłówki: Inter w ciężkiej wadze (800) — wybór Pity po porównaniu na hero. */
  --font-display: var(--font-body);
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Skala typu (modularna, oparta o 8px-owy rytm) */
  --text-xs:    0.8125rem;  /* 13 */
  --text-sm:    0.9375rem;  /* 15 */
  --text-base:  1.0625rem;  /* 17 — body */
  --text-lg:    1.25rem;    /* 20 */
  --text-xl:    1.5rem;     /* 24 */
  --text-2xl:   2rem;       /* 32 */
  --text-3xl:   2.75rem;    /* 44 */
  --text-4xl:   3.75rem;    /* 60 */
  --h1:         clamp(2.75rem, 6vw, 4.5rem); /* hero — płynnie */
  --h2:         clamp(2rem, 4vw, 3.25rem);

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --tracking-tight: -0.02em;  /* duże nagłówki ciaśniej */

  /* --- SPACING (siatka 8px) --------------------------------- */
  --s-0_5: 4px;
  --s-1:   8px;
  --s-2:   16px;
  --s-3:   24px;
  --s-4:   32px;
  --s-5:   40px;
  --s-6:   48px;
  --s-8:   64px;
  --s-10:  80px;
  --s-12:  96px;
  --s-16:  128px;
  --s-20:  160px;

  /* --- PROMIENIE -------------------------------------------- */
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* --- CIENIE (subtelne, warstwowe — nie 2010) -------------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -10px rgba(0,0,0,.55);
  --shadow-lg: 0 28px 70px -20px rgba(0,0,0,.7);
  --glow:      0 0 40px -6px var(--brand-glow);

  /* --- RUCH (mikro-interakcje, idealnie wytimingowane) ------ */
  --dur-fast: 150ms;
  --dur:      220ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* --- LAYOUT ----------------------------------------------- */
  --container:        1200px;
  --container-narrow: 820px;
  --gutter:           24px;

  /* --- FOCUS (a11y — zawsze widoczny) ----------------------- */
  --focus-ring: 0 0 0 3px rgba(0,122,255,.5);
}

/* ============================================================
   BAZA — wspólna dla wszystkich stron
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:where(:focus-visible) {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

/* Subtelny grain na całości — bardzo niska opacity, podnosi premium.
   Dodaj <div class="grain"></div> jako pierwsze dziecko <body>. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   SZANUJ prefers-reduced-motion — globalny bezpiecznik.
   Sekwencja logo i scroll-telling muszą to respektować.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}