/* AVENTECH Innovation — tokens.css
   Pojedyncze źródło prawdy dla całego designu: kolory, typografia,
   spacing, radius, shadows, z-index, transitions, container.

   Kolejność ładowania CSS (stała):
     reset.css → fonts.css → tokens.css → base.css → components.css → page-specific (css/pages/*.css)

   Breakpointy (do użycia w @media):
     mobile     ~480px
     tablet     ~768px
     desktop   ~1024px
     wide      ~1280px
*/

:root {
  /* === Kolory brandowe === */
  --color-orange: #F37321;
  --color-black: #000003;
  --color-dark-grey: #3F4243;
  --color-white: #FFFFFF;

  /* === Skala neutralnych szarości === */
  --color-grey-50:  #F7F8F8;
  --color-grey-100: #ECEDEE;
  --color-grey-200: #D5D7D9;
  --color-grey-300: #B5B8BB;
  --color-grey-400: #8B8E91;
  --color-grey-500: #66696B;
  --color-grey-600: #4F5254;
  --color-grey-700: #3F4243; /* = --color-dark-grey */
  --color-grey-800: #292B2C;
  --color-grey-900: #131415;

  /* === Kolory semantyczne === */
  --color-bg:           var(--color-white);
  --color-bg-dark:      var(--color-black);
  --color-bg-surface:   var(--color-grey-50);
  --color-text:         var(--color-grey-900);
  --color-text-muted:   var(--color-grey-500);
  --color-text-inverse: var(--color-white);
  --color-border:       var(--color-grey-200);
  --color-accent:       var(--color-orange);
  --color-accent-soft:  rgba(243, 115, 33, 0.08);

  /* === Typografia === */
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Inter', system-ui, sans-serif; /* docelowo Conthrax SemiBold po weryfikacji licencji */

  /* Skala rozmiarów — clamp(min, preferred, max) — responsywne od mobile do desktop */
  --fs-xs:   0.75rem;                                   /* 12px stałe */
  --fs-sm:   0.875rem;                                  /* 14px stałe */
  --fs-base: 1rem;                                      /* 16px bazowy */
  --fs-md:   1.125rem;                                  /* 18px */
  --fs-lg:   clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* 18 → 20px */
  --fs-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem); /* 20 → 24px */
  --fs-2xl:  clamp(1.5rem,   1.2rem  + 1.25vw, 2rem);   /* 24 → 32px — h3 */
  --fs-3xl:  clamp(1.75rem,  1.3rem  + 2vw,    2.5rem); /* 28 → 40px — h2 */
  --fs-4xl:  clamp(2rem,     1.5rem  + 2.5vw,  3rem);   /* 32 → 48px — h1 */
  --fs-5xl:  clamp(2.5rem,   1.8rem  + 3.5vw,  4rem);   /* 40 → 64px — hero/display */

  /* Wagi */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line-heighty */
  --lh-tight: 1.2;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  /* === Odstępy (skala 4px-based) === */
  --space-1:  0.25rem;  /*  4px */
  --space-2:  0.5rem;   /*  8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* === Promienie (industrial: zdecydowane krawędzie) === */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* === Cienie (subtelne) === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.12), 0 6px 12px -4px rgba(0, 0, 0, 0.06);

  /* === Container === */
  --container-max:     1280px;
  --container-padding: var(--space-6);

  /* === Transitions === */
  --transition-base: 150ms ease;
  --transition-slow: 300ms ease;

  /* === Z-index === */
  --z-header:  100;
  --z-overlay: 500;
  --z-modal:  1000;
}