/* =============================================================================
   dcCMS — Achilles :: Design Tokens
   Jedno źródło prawdy dla całego projektu. Wpinaj ten plik w <head> RAZ,
   przed pozostałymi arkuszami. Wszystkie wartości pochodzą z tailwind.config.ts
   (paleta bez copper/gradientów) + layout.tsx (fonty Outfit / Inter).
   ============================================================================= */

:root {
  /* ---- Kolory: brand core ---------------------------------------------- */
  --navy:            #0C2F48;
  --teal:            #3088A7;
  --deep-teal:       #0C5968;
  --mint:            #BEE1DE;

  /* Tło strony — czyste off-white (NIE #FFFFFF). Token historycznie "cream". */
  --cream:           #FDFDFD;
  --off-white:       #FDFDFD;

  /* ---- Kolory: neutrale (skala ink) ------------------------------------ */
  --ink-50:          #F7F6F4;
  --ink-100:         #EDEAE6;
  --ink-200:         #D9D5CF;
  --ink-300:         #B8B3AB;
  --ink-400:         #938D84;
  --ink-500:         #6E6860;
  --ink-600:         #524D47;
  --ink-700:         #3A3630;
  --ink-800:         #252220;
  --ink-900:         #141210;

  /* ---- Kolory: semantyczne --------------------------------------------- */
  --color-bg:        var(--off-white);
  --color-surface:   #FFFFFF;
  --color-text:      var(--navy);
  --color-text-secondary: #524D47;
  --color-text-muted:     #938D84;
  --color-border:    #D9D5CF;
  --color-primary:   var(--teal);
  --color-on-primary:#FFFFFF;

  /* Wersje z alfą (nakładki na navy/teal) */
  --navy-08:         rgba(12, 47, 72, 0.08);
  --navy-10:         rgba(12, 47, 72, 0.10);
  --white-40:        rgba(255, 255, 255, 0.40);
  --white-50:        rgba(255, 255, 255, 0.50);
  --white-65:        rgba(255, 255, 255, 0.65);
  --white-70:        rgba(255, 255, 255, 0.70);
  --white-75:        rgba(255, 255, 255, 0.75);
  --white-85:        rgba(255, 255, 255, 0.85);

  /* ---- Typografia: rodziny --------------------------------------------- */
  --font-heading:    "Outfit", system-ui, sans-serif;
  --font-body:       "Inter", system-ui, sans-serif;

  /* ---- Typografia: grubości -------------------------------------------- */
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  /* ---- Typografia: rozmiary (clamp 1:1 z konfiguracji) ----------------- */
  --fs-display:      clamp(48px, 6vw, 72px);
  --fs-h1:           clamp(36px, 4.5vw, 64px);
  --fs-h2:           clamp(28px, 3.5vw, 48px);
  --fs-h3:           clamp(22px, 2.5vw, 30px);
  --fs-h4:           clamp(18px, 2vw, 20px);
  --fs-body-xl:      20px;
  --fs-body-lg:      18px;
  --fs-body:         16px;
  --fs-sm:           14px;
  --fs-xs:           13px;
  --fs-2xs:          12px;

  /* ---- Typografia: interlinie ------------------------------------------ */
  --lh-tight:        1.05;
  --lh-heading:      1.15;
  --lh-snug:         1.25;
  --lh-normal:       1.5;
  --lh-relaxed:      1.7;

  /* ---- Typografia: tracking -------------------------------------------- */
  --ls-tighter:      -0.02em;
  --ls-tight:        -0.01em;
  --ls-normal:       0;
  --ls-wide:         0.08em;   /* nagłówki kolumn / eyebrow */
  --ls-wider:        0.1em;

  /* ---- Promienie ------------------------------------------------------- */
  --radius-xs:       4px;
  --radius-sm:       8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-xl:       24px;
  --radius-2xl:      32px;
  --radius-pill:     999px;

  /* ---- Cienie (brand, oparte o navy) ----------------------------------- */
  --shadow-xs:       0 1px 3px rgba(12, 47, 72, 0.06);
  --shadow-sm:       0 2px 8px rgba(12, 47, 72, 0.08);
  --shadow-md:       0 4px 16px rgba(12, 47, 72, 0.10);
  --shadow-lg:       0 8px 32px rgba(12, 47, 72, 0.12);
  --shadow-xl:       0 16px 64px rgba(12, 47, 72, 0.16);

  /* ---- Spacing (skala bazowa + niestandardowe 18/22/26/30) ------------- */
  --space-0:         0;
  --space-1:         4px;
  --space-2:         8px;
  --space-3:         12px;
  --space-4:         16px;
  --space-5:         20px;
  --space-6:         24px;
  --space-8:         32px;
  --space-10:        40px;
  --space-12:        48px;
  --space-14:        56px;
  --space-16:        64px;
  --space-18:        72px;
  --space-20:        80px;
  --space-22:        88px;
  --space-24:        96px;
  --space-26:        104px;
  --space-30:        120px;

  /* ---- Kontener -------------------------------------------------------- */
  --container-max:   1280px;
  --container-pad:   20px;      /* mobile */
  --container-pad-lg:40px;
  --container-pad-xl:80px;

  /* ---- Ruch / animacje ------------------------------------------------- */
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --dur-fast:        150ms;
  --dur:             300ms;
  --dur-slow:        500ms;

  /* ---- Warstwy (z-index) ----------------------------------------------- */
  --z-header:        50;
  --z-cta:           40;
  --z-mobile:        60;
  --z-overlay:       70;
}

/* =============================================================================
   Keyframes wielokrotnego użytku (przydadzą się blokom: marquee testimoniali,
   fade-up sekcji). Trzymamy w tokenach, żeby były dostępne globalnie.
   ============================================================================= */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}