/* ========== BASE BRAND COLORS (z colors.brand) ========== */

:root {
  /* VIOLET */
  --color-brand-violet-100: #F4EDFC;
  --color-brand-violet-200: #E4D5FA;
  --color-brand-violet-300: #CDB1F5;
  --color-brand-violet-400: #B48DF0;
  --color-brand-violet-500: #9C69E9;
  --color-brand-violet-600: #7A27CC;
  --color-brand-violet-700: #621FA7;
  --color-brand-violet-800: #4A1782;
  --color-brand-violet-900: #320F5D;

  /* LAVENDER */
  --color-brand-lavender-100: #F8F6FF;
  --color-brand-lavender-200: #EDE9FC;
  --color-brand-lavender-300: #DCD4FA;
  --color-brand-lavender-400: #C4B6F4;
  --color-brand-lavender-500: #A896EA;
  --color-brand-lavender-600: #8E7BD1;
  --color-brand-lavender-700: #7462B7;
  --color-brand-lavender-800: #5B4A9D;
  --color-brand-lavender-900: #423282;

  /* GRAY (brand.gray) */
  --color-brand-gray-0:   #FFFFFF;
  --color-brand-gray-100: #F7F6FA;
  --color-brand-gray-150: #F4F2FA;
  --color-brand-gray-200: #EDECF4;
  --color-brand-gray-250: #E7E6EF;
  --color-brand-gray-300: #E3E1EC;
  --color-brand-gray-350: #DAD8E2;
  --color-brand-gray-400: #D3D0DE;
  --color-brand-gray-450: #CBCAE2;
  --color-brand-gray-500: #BEBAD2;
  --color-brand-gray-550: #A09FB5;
  --color-brand-gray-600: #8F8EA4;
  --color-brand-gray-650: #7E7F94;
  --color-brand-gray-700: #5C5B6C;
  --color-brand-gray-750: #555566;
  --color-brand-gray-800: #2B2B38;
  --color-brand-gray-850: #232334;
  --color-brand-gray-900: #1C1C28;
  --color-brand-gray-999: #000000;

  /* GREEN */
  --color-brand-green-100: #EBF9ED;
  --color-brand-green-200: #C8EECF;
  --color-brand-green-300: #A5E3B1;
  --color-brand-green-400: #81D894;
  --color-brand-green-500: #4CAF50;
  --color-brand-green-600: #3F9E43;
  --color-brand-green-700: #317E35;
  --color-brand-green-800: #245E28;
  --color-brand-green-900: #163E1A;

  /* RED */
  --color-brand-red-100: #FDEDEA;
  --color-brand-red-200: #FACDC6;
  --color-brand-red-300: #F5ABA1;
  --color-brand-red-400: #F08A7D;
  --color-brand-red-500: #E74C3C;
  --color-brand-red-600: #C33E31;
  --color-brand-red-700: #9E3126;
  --color-brand-red-800: #7A241B;
  --color-brand-red-900: #561811;

  /* BLUE (information) */
  --color-brand-blue-100: #E2E7ED;
  --color-brand-blue-200: #B9C7D7;
  --color-brand-blue-300: #8EA3BE;
  --color-brand-blue-400: #6782A3;
  --color-brand-blue-500: #4A5E7C;
  --color-brand-blue-600: #334056;
  --color-brand-blue-700: #252A39;
  --color-brand-blue-800: #1C1E27;
  --color-brand-blue-900: #14141B;
}

/* ========== ALIAS PALETTES (alias.light) ========== */

:root {
  /* PRIMARY = violet */
  --color-primary-100: var(--color-brand-violet-100);
  --color-primary-200: var(--color-brand-violet-200);
  --color-primary-300: var(--color-brand-violet-300);
  --color-primary-400: var(--color-brand-violet-400);
  --color-primary-500: var(--color-brand-violet-500);
  --color-primary-600: var(--color-brand-violet-600);
  --color-primary-700: var(--color-brand-violet-700);
  --color-primary-800: var(--color-brand-violet-800);
  --color-primary-900: var(--color-brand-violet-900);

  /* SECONDARY = lavender */
  --color-secondary-100: var(--color-brand-lavender-100);
  --color-secondary-200: var(--color-brand-lavender-200);
  --color-secondary-300: var(--color-brand-lavender-300);
  --color-secondary-400: var(--color-brand-lavender-400);
  --color-secondary-500: var(--color-brand-lavender-500);
  --color-secondary-600: var(--color-brand-lavender-600);
  --color-secondary-700: var(--color-brand-lavender-700);
  --color-secondary-800: var(--color-brand-lavender-800);
  --color-secondary-900: var(--color-brand-lavender-900);

  /* NEUTRALS = brand.gray */
  --color-neutral-0:   var(--color-brand-gray-0);
  --color-neutral-100: var(--color-brand-gray-100);
  --color-neutral-150: var(--color-brand-gray-150);
  --color-neutral-200: var(--color-brand-gray-200);
  --color-neutral-250: var(--color-brand-gray-250);
  --color-neutral-300: var(--color-brand-gray-300);
  --color-neutral-350: var(--color-brand-gray-350);
  --color-neutral-400: var(--color-brand-gray-400);
  --color-neutral-450: var(--color-brand-gray-450);
  --color-neutral-500: var(--color-brand-gray-500);
  --color-neutral-550: var(--color-brand-gray-550);
  --color-neutral-600: var(--color-brand-gray-600);
  --color-neutral-650: var(--color-brand-gray-650);
  --color-neutral-700: var(--color-brand-gray-700);
  --color-neutral-750: var(--color-brand-gray-750);
  --color-neutral-800: var(--color-brand-gray-800);
  --color-neutral-850: var(--color-brand-gray-850);
  --color-neutral-900: var(--color-brand-gray-900);
  --color-neutral-999: var(--color-brand-gray-999);

  /* SUCCESS = green */
  --color-success-100: var(--color-brand-green-100);
  --color-success-200: var(--color-brand-green-200);
  --color-success-300: var(--color-brand-green-300);
  --color-success-400: var(--color-brand-green-400);
  --color-success-500: var(--color-brand-green-500);
  --color-success-600: var(--color-brand-green-600);
  --color-success-700: var(--color-brand-green-700);
  --color-success-800: var(--color-brand-green-800);
  --color-success-900: var(--color-brand-green-900);

  /* ERROR = red */
  --color-error-100: var(--color-brand-red-100);
  --color-error-200: var(--color-brand-red-200);
  --color-error-300: var(--color-brand-red-300);
  --color-error-400: var(--color-brand-red-400);
  --color-error-500: var(--color-brand-red-500);
  --color-error-600: var(--color-brand-red-600);
  --color-error-700: var(--color-brand-red-700);
  --color-error-800: var(--color-brand-red-800);
  --color-error-900: var(--color-brand-red-900);

  /* INFORMATION = blue */
  --color-info-100: var(--color-brand-blue-100);
  --color-info-200: var(--color-brand-blue-200);
  --color-info-300: var(--color-brand-blue-300);
  --color-info-400: var(--color-brand-blue-400);
  --color-info-500: var(--color-brand-blue-500);
  --color-info-600: var(--color-brand-blue-600);
  --color-info-700: var(--color-brand-blue-700);
  --color-info-800: var(--color-brand-blue-800);
  --color-info-900: var(--color-brand-blue-900);
   
}



/* ========== MAPPED PALETTES (alias.light) ========== */

:root {
   /* SURFACES (mapped.light.surfaces) */
   --header-bg-color: rgba(255, 255, 255, 0.96);
   --header-bg-link-hover: var(--color-primary-100);
  --color-surface-base:        var(--color-neutral-0);     /* surface-base */
  --color-surface-subtle:      var(--color-neutral-100);   /* surface-subtle */
  --color-surface-muted:       var(--color-neutral-200);   /* surface-muted */

  --color-hero-gradient-1: var(--color-primary-100);       /* hero-gradient-1 */
  --color-hero-gradient-2: var(--color-neutral-150);       /* hero-gradient-2 */
  --color-hero-gradient-3: #F6EDE6;                        /* hero-gradient-3 */
  --color-hero-gradient-4: #EAE6F9;                        /* hero-gradient-4 */

  --color-home-folio-gradient-1: #F6EDE6;
  --color-home-folio-gradient-2: var(--color-neutral-0);

  --color-cta-gradient-energy-1: var(--color-secondary-600);
  --color-cta-gradient-energy-2: var(--color-secondary-200);

  --color-shape-background: var(--color-neutral-500);

  --color-action-primary:          var(--color-primary-600); /*zmiana*/
  --color-action-primary-hover:    var(--color-primary-700);
  --color-action-primary-pressed:  var(--color-primary-800);

  --color-action-secondary:        var(--color-secondary-400);
  --color-action-secondary-hover:  var(--color-secondary-500);
  --color-action-secondary-pressed: var(--color-secondary-600);

  --color-action-tertiary:         var(--color-neutral-200);
  --color-action-tertiary-hover:   var(--color-neutral-300);
  --color-action-tertiary-pressed: var(--color-neutral-400);

  --color-disabled: var(--color-neutral-350);

  
  --color-card: var(--color-neutral-0);

  --color-footer-bg:  var(--color-info-100);

  /* TEXT (mapped.light.text) */
  --header-text-color: 			  var(--color-neutral-800);
  --header-link-muted: rgba(0, 0, 0, 0.64);/*dopracować*/
  
  --color-text-heading:           var(--color-neutral-900);
  --color-text-body:              var(--color-neutral-800);
  --color-text-hero-heading:      var(--color-neutral-900);
  --color-text-hero-lead:         var(--color-neutral-800);
  --color-text-accent:            var(--color-secondary-500);
  --color-text-eyebrow:           var(--color-neutral-700);
  --color-text-link:              var(--color-primary-600);
  --color-text-link-hover:        var(--color-primary-700);
  --color-text-link-cta:          var(--color-neutral-900);
  --color-text-link-cta-hover:    var(--color-primary-600);

  --color-text-on-action-primary:          var(--color-neutral-0);
  --color-text-on-action-primary-hover:    var(--color-neutral-0);
  --color-text-on-action-primary-pressed:  var(--color-neutral-0);

  --color-text-on-action-secondary:        var(--color-neutral-800);
  --color-text-on-action-secondary-hover:  var(--color-neutral-800);
  --color-text-on-action-secondary-pressed:var(--color-neutral-800);

  --color-text-on-action-outline:         var(--color-primary-600);/*zmiana*/
  --color-text-on-action-outline-hover:   var(--color-primary-700);
  --color-text-on-action-outline-pressed: var(--color-primary-800);

  --color-text-disabled: var(--color-neutral-500);

  --color-text-heading-on-card: var(--color-neutral-900);
  --color-text-body-on-card:    var(--color-neutral-800);
  

  --color-footer-links:      var(--color-neutral-750);
  --color-footer-copy:       var(--color-neutral-800);
  --color-footer-signature:  var(--color-neutral-600);

  /* ICONS (mapped.light.icons) */
  --color-icon-brand:       var(--color-primary-600);
  --color-icon-accent:      var(--color-secondary-500);
  --color-icon-default:     var(--color-neutral-700);
  --color-icon-on-light:    var(--color-neutral-800);
  --color-icon-on-dark:     var(--color-neutral-100);
  --color-icon-success:     var(--color-success-500);
  --color-icon-error:       var(--color-error-500);
  --color-icon-action:      var(--color-primary-500);
  --color-icon-action-hover:var(--color-primary-600);
  --color-icon-disabled:    var(--color-neutral-500);
  --color-icon-clients-logos: var(--color-neutral-900);

  /* BORDERS (mapped.light.borders) */
  --color-border-action-outline:          var(--color-primary-600); /*zmiana*/
  --color-border-action-outline-hover:    var(--color-primary-700);
  --color-border-action-outline-pressed:  var(--color-primary-800);
  --color-border-disabled:                var(--color-neutral-500);
  --color-border-default:                 var(--color-neutral-300);
  --color-border-divider-on-footer:       var(--color-info-200);    
  --color-border-divider:                 var(--color-neutral-300);
  --color-border-focus:                   var(--color-primary-500);
  --color-border-active:                  var(--color-primary-600);
  --color-border-error:                   var(--color-error-500);
  --color-border-success:                 var(--color-success-500);
  --header-border-color: rgba(0, 0, 0, 0.06);
  
}



/* ========== SEMANTIC – LIGHT THEME (mapped.light) ========== */





.theme-dark {
  /* Surfaces */
  --header-bg-color: rgba(31, 20, 28, 0.98);
  --header-bg-link-hover: var(--color-primary-700);
  --color-surface-base: var(--color-neutral-999);
  --color-surface-subtle: var(--color-neutral-900);
  --color-surface-muted: var(--color-neutral-850);

  --color-hero-gradient-1: var(--color-neutral-900);
  --color-hero-gradient-2: var(--color-neutral-750);
  --color-hero-gradient-3: #1F141C;
  --color-hero-gradient-4: #13162F;

  --color-home-folio-gradient-1: #221827;
  --color-home-folio-gradient-2: var(--color-neutral-100);

  --color-cta-gradient-energy-1: #3C2B77;
  --color-cta-gradient-energy-2: var(--color-neutral-100);

  --color-shape-background: var(--color-primary-600);

  --color-action-primary: var(--color-primary-600);
  --color-action-primary-hover: var(--color-primary-500);
  --color-action-primary-pressed: var(--color-primary-400);

  --color-action-secondary: var(--color-secondary-500);
  --color-action-secondary-hover: var(--color-secondary-400);
  --color-action-secondary-pressed: var(--color-secondary-300);

  --color-action-tertiary: var(--color-neutral-350);
  --color-action-tertiary-hover: var(--color-neutral-500);
  --color-action-tertiary-pressed: var(--color-neutral-600);

  --color-disabled: var(--color-neutral-400);

 /* --color-card-dark: var(--color-neutral-100);*/
  --color-card: var(--color-neutral-850);

  --color-footer-bg: var(--color-info-900); /*mg-100*/

  /* Text */
  --header-text-color: var(--color-neutral-200);
  --header-link-muted: rgba(255, 255, 255, 0.76);/*dopracować*/
  
  --color-text-heading: var(--color-neutral-0); /*mg-999*/
  --color-text-body: var(--color-neutral-200); /*mg-800*/

  --color-text-hero-heading: var(--color-neutral-0); /*mg-999*/
  --color-text-hero-lead: var(--color-neutral-500); /*mg-none*/

  --color-text-accent: var(--color-primary-500);
  --color-text-eyebrow: var(--color-neutral-300); /*mg-700*/

  --color-text-link: var(--color-primary-600);
  --color-text-link-hover: var(--color-primary-700);

  --color-text-link-cta: var(--color-neutral-900);
  --color-text-link-cta-hover: var(--color-primary-600);

  --color-text-on-action-primary: var(--color-neutral-0);
  --color-text-on-action-primary-hover: var(--color-neutral-0);
  --color-text-on-action-primary-pressed: var(--color-neutral-0);

  --color-text-on-action-secondary: var(--color-neutral-900);
  --color-text-on-action-secondary-hover: var(--color-neutral-900);
  --color-text-on-action-secondary-pressed: var(--color-neutral-900);

  --color-text-on-action-outline: var(--color-secondary-300); /*zmiana*/
  --color-text-on-action-outline-hover: var(--color-secondary-400);
  --color-text-on-action-outline-pressed: var(--color-secondary-500);

  --color-text-disabled: var(--color-neutral-300);

  --color-heading-on-light-card: var(--color-neutral-100);
  --color-body-on-light-card: var(--color-neutral-200);

  --color-text-heading-on-card: var(--color-neutral-100);
  --color-text-body-on-card: var(--color-neutral-200);
  

  --color-footer-links: var(--color-neutral-350);  /*MG 650*/
  --color-footer-copy: var(--color-info-100);  /*MG 900*/
  --color-footer-signature: var(--color-neutral-650); /*MG 450*/

  /* Icons */
  --color-icon-brand: var(--color-primary-400);
  --color-icon-accent: var(--color-secondary-500);
  --color-icon-default: var(--color-neutral-700);
  --color-icon-on-light: var(--color-neutral-100);
  --color-icon-on-dark: var(--color-neutral-800);

  --color-icon-success: var(--color-success-400);
  --color-icon-error: var(--color-error-400);

  --color-icon-action: var(--color-secondary-400);
  --color-icon-action-hover: var(--color-secondary-500);

  --color-icon-disabled: var(--color-neutral-300);

  --color-clients-logos: var(--color-neutral-900);

  /* Borders */
  --color-border-action-outline: var(--color-secondary-300);
  --color-border-action-outline-hover: var(--color-secondary-400);
  --color-border-action-outline-pressed: var(--color-secondary-500);

  --color-border-disabled: var(--color-neutral-300);

  --color-border-default: var(--color-neutral-300);
  --color-border-divider-on-footer: var(--color-info-800);  /*200*/
  --color-border-divider: var(--color-neutral-800); /*200*/

  --color-border-focus: var(--color-primary-400);
  --color-border-active: var(--color-primary-300);
  --color-border-error: var(--color-error-400);
  --color-border-success: var(--color-success-400);
  --header-border-color: rgba(255, 255, 255, 0.08);
}







/* ========== SPACING SCALE (px) ========== */

:root {
  /* RAW – z scale.brand.spacing */
  --space-0:    0px;
  --space-50:   4px;
  --space-100:  8px;
  --space-150:  10px;
  --space-200:  12px;
  --space-300:  16px;
  --space-400:  24px;
  --space-450:  28px;
  --space-500:  32px;
  --space-600:  40px;
  --space-700:  48px;
  --space-750:  56px;
  --space-800:  64px;
  --space-900:  80px;
  --space-1000: 96px;
  --space-1100: 128px;
  --space-1200: 160px;
  --space-1300: 200px;

  /* ALIAS (scale.alias.spacing) */
  --space-xs:    var(--space-50);
  --space-sm:    var(--space-100);
  --space-sm-md: var(--space-200);
  --space-md:    var(--space-300);
  --space-lg:    var(--space-400);
  --space-xl:    var(--space-600);
  --space-2xl:   var(--space-700);
  --space-3xl:   var(--space-800);
  --space-4xl:   var(--space-900);
  --space-5xl:   var(--space-1000);

  /* RADIUS (scale.alias.radius) */
  --radius-none:   0px;
  --radius-micro:  var(--space-50);
  --radius-small:  var(--space-100);
  --radius-md-sm:  var(--space-150);
  --radius-base:   var(--space-200);
  --radius-large:  var(--space-300);
  --radius-xl:     var(--space-400);
  --radius-2xl:    var(--space-500);
  --radius-3xl:    var(--space-600);
  --radius-4xl:    var(--space-700);
  --radius-round:  999px;

  /* MAPPED RADIUS (scale.mapped.radius) */
  --radius-button: var(--radius-round);
  --radius-card:   var(--radius-large);
  --radius-image:  var(--radius-base);
  --radius-small-card: var(--radius-3xl);
  --radius-overlap-item: var(--radius-3xl);

  /* BORDER WIDTHS (scale.alias.borders-width) */
  --border-width-none:    0;
  --border-width-xs:      0.5px;
  --border-width-sm:      1px;
  --border-width-sm-md:   1.5px;
  --border-width-md:      2px;
  --border-width-lg:      2.5px;
  --border-width-xl:      4px;

  /* MAPPED BORDER WIDTHS */
  --border-width-button-outline: var(--border-width-sm-md);
  
  /* MAPPED SPACINGS BUTTONS*/
  --padding-x-button: var(--space-lg); /* Update Figma! */
  --padding-y-button: var(--space-md); /* Update Figma! */
  --gap-y-buttons: var(--space-sm-md); /* Update Figma! */
  
  /* MAPPED SPACINGS HERO - XL DESKTOP*/
  --h1-to-lead: var(--space-500);  
  --lead-to-button: var(--space-600);  
  --buttons-gap: var(--space-lg);   /* Update Figma! */
  --hero-padding-top: var(--space-0);  /* Update Figma! */
  --hero-minimal-padding-top: var(--space-1100);  /* NEW */
  
   /* MAPPED SPACINGS SECTION - XL DESKTOP*/
  --section-padding-y: var(--space-900);  /* Update Figma! */
  --section-padding-y-bottom: var(--space-1000);  /* NEW! */
  --section-padding-x: var(--space-lg);  /* Update Figma! */
  --eyebrow-to-h2: var(--space-600);   /* Update Figma! */
  --h2-to-lead: var(--space-600);   /* Update Figma! */
  --lead-to-overline: var(--space-800);   /* Update Figma! */
  --h2-to-subsection: var(--space-700);   /* Update Figma! */
  --lead-to-subsection: var(--space-800);   /* Update Figma! */
  --li-padding-top: var(--space-md);  /* NEW */
  --li-padding-bottom: var(--space-lg);  /* NEW */
  
   /* MAPPED SPACINGS SUBSECTION - XL DESKTOP*/
   --eyebrow-to-h3: var(--space-300);   /* Update Figma! */
  --h3-to-paragraph: var(--space-400);   /* Update Figma! */
  --h3-to-images: var(--space-800);   /* Update Figma! */
  --paragraph-button: var(--space-600);  /* Update Figma! */ 
  --card-separator-gap: var(--space-800);  /* Update Figma! */ 
  --image-text-x-gap: var(--space-800);  /* Update Figma! */ 
  --image-sm-to-text: var(--space-lg);  /* NEW */ 
  
  
  /* MAPPED CAROUSEL SPACINGS - XL DESKTOP*/
  --carousel-card-paddings: var(--space-600);  /* Update Figma! */
  --carousel-nav-gap: var(--space-400); /* NEW */
  --buttons-gap: var(--space-md);
 
  /* MOSAIC SPACING */
  --mosaic-gap: var(--space-2xl);
  
  /* OVERLAYED GRAPHICS SPACING */
  --margin-top-to-overlayed-item: var(--space-3xl); /*NEW*/
  
  
}

/* MAPPED SPACINGS - MD DESKTOP*/
@media (max-width: 1540px) {
:root {
  --h1-to-lead: var(--space-500);   
  --lead-to-button: var(--space-600); 
  /*--section-padding-y: var(--space-900); */
  --section-padding-x: var(--space-lg);
 /* --eyebrow-to-h2: var(--space-500);*/
  --h2-to-lead: var(--space-500);
  --lead-to-overline: var(--space-700);
  /*--h2-to-subsection: var(--space-600); */
  --lead-to-subsection: var(--space-800);
  --eyebrow-to-h3: var(--space-300); 
  --h3-to-paragraph: var(--space-400);
  --h3-to-images: var(--space-800);
  --paragraph-button: var(--space-500);  
  --card-separator-gap: var(--space-800);
  --image-text-x-gap: var(--space-800);
  --carousel-card-padding: var(--space-500);
  --carousel-nav-gap: var(--space-400);
  
  }
}

/* TABLET OVERRIDES */


@media (max-width: 1199px) {
:root {
	--hero-padding-top: var(--space-200); /* sprawdzic przy projektowaniu*/
  --h1-to-lead: var(--space-400);   
  --lead-to-button: var(--space-500); 
  --section-padding-y: var(--space-800); 
  --section-padding-y-bottom: var(--space-1000);
  --section-padding-x: var(--space-0);
  /*--eyebrow-to-h2: var(--space-400);*/
  --h2-to-lead: var(--space-400);
  --lead-to-overline: var(--space-600);
   --h2-to-subsection: var(--space-600);
   --lead-to-subsection: var(--space-700); 
   --eyebrow-to-h3: var(--space-200); 
   --h3-to-paragraph: var(--space-300);
   --h3-to-images: var(--space-700);
   --paragraph-button: var(--space-450);  
   --image-text-x-gap: var(--space-700);
   --card-separator-gap: var(--space-700);
   --carousel-card-paddings: var(--space-400);
   --carousel-nav-gap: var(--space-400);
   --mosaic-gap: var(--space-xl);
  }
}
/* TABLET OVERRIDES 2 */
@media (max-width: 1024px) {
	:root {
	--section-padding-x: var(--space-500);
	--section-padding-y: var(--space-700);
  --section-padding-y-bottom: var(--space-900);
  --mosaic-gap: var(--space-lg);
  /*--h2-to-subsection: var(--space-500);*/
  --eyebrow-to-h2: var(--space-400);
}
}

/* TABLET V OVERRIDES & MOBILE 2 */
@media (max-width: 768px) {
:root {
	--hero-padding-top: var(--space-100);
  --h1-to-lead: var(--space-300);   
  --lead-to-button: var(--space-500);  
  --buttons-gap: var(--space-200); 
  --section-padding-y: var(--space-800);
  --section-padding-y-bottom: var(--space-900);
  --section-padding-x: var(--space-500);
  /*--eyebrow-to-h2: var(--space-300);*/
  --h2-to-lead: var(--space-300);
  --lead-to-overline: var(--space-500);
  --eyebrow-to-h3: var(--space-300); 
   --h2-to-subsection: var(--space-600); 
   --lead-to-subsection: var(--space-600);
   --h3-to-images: var(--space-600);
   --paragraph-button: var(--space-400);  
   --card-separator-gap: var(--space-700);
   --image-text-x-gap: var(--space-500);
   --carousel-card-paddings: var(--space-400);
   --carousel-nav-gap: var(--space-400);
 }
}




/* MOBILE */

@media (max-width: 599px) {
	:root {
	--buttons-gap: var(--space-400); 
	--section-padding-x: var(--space-300);  /* Update Figma! */
	--mosaic-gap: var(--space-md);
	}
}


/* ========== TYPOGRAPHY ========== */

:root {
  /* FONT FAMILY (typography.brand/font-family + alias) */
  --font-family-heading: "Satoshi", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* FONT WEIGHTS (mapuję regular/medium/semibold/bold → numery) */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-weight-heading:  var(--font-weight-bold);     /* alias.heading */
  --font-weight-body:     var(--font-weight-regular);  /* alias.body */
  --font-weight-menu:     var(--font-weight-regular); /* alias.menu */
  --font-weight-ui:       var(--font-weight-medium);   /* alias.ui */
  --font-weight-hamburger:  var(--font-weight-bold);

  /* DESKTOP – z typography.responsive.heading/body/ui */

  --font-size-h1:         54px;    /* było 54px → +11% */
--line-height-h1:       1.15;    /* bez zmian */
--letter-spacing-h1:   -0.01em;  /* bez zmian */

--font-size-h2:         36px;    /* było 36px → +11% */
--line-height-h2:       1.25;
--letter-spacing-h2:    0;

--font-size-h3:         26px;    /* było 26px → +15% */
--line-height-h3:       1.35;
--letter-spacing-h3:    0.01em;


 --font-size-body-base:     18px;     /* było 18px → +5% */
--line-height-body-base:   1.6;
--letter-spacing-body-base:0;

--font-size-body-small:     16px;    /* było 16px → +6% */
--line-height-body-small:   1.55;
--letter-spacing-body-small:0.02em;


  /* UI: menu-item, button-label, eyebrow, link-cta, text-lead */
  --font-size-menu-item:      14px;     /* było 14px → +1px */
--line-height-menu-item:    1.30;
--letter-spacing-menu-item: 0.12em;

--font-size-button-label:      17px;  /* było 16px → +1px */
--line-height-button-label:    1.5;
--letter-spacing-button-label: 0.06em;

--font-size-eyebrow:      14px;     /* było 14px → +1px */
--line-height-eyebrow:    1.35;
--letter-spacing-eyebrow: 0.10em;

--font-size-overline:      14px;    /* było 14px → +1px */
--line-height-overline:    1.35;
--letter-spacing-overline: 0.12em;

--font-size-link-cta:       16px;   /* było 16px → +1px */
--line-height-link-cta:     1.5;
--letter-spacing-link-cta:  0.02em;

--font-size-text-lead:     20px;   /* było 20px → +10% */
--line-height-text-lead:   1.6;



}

/* DESKTOP MD OVERRIDES */

@media (max-width: 1540px) {
  :root {
  --font-size-h1:         54px;
  --line-height-h1:       1.15;
  --letter-spacing-h1:   -0.01em;

  --font-size-h2:         36px;
  --line-height-h2:       1.25;
  --letter-spacing-h2:    0;

  --font-size-h3:         26px;
  --line-height-h3:       1.35;
  --letter-spacing-h3:    0.01em;

  --font-size-body-base:  18px;
  --line-height-body-base:1.6;
  --letter-spacing-body-base:0;

  --font-size-body-small: 16px;
  --line-height-body-small:1.55;
  --letter-spacing-body-small:0.02em;

  /* UI: menu-item, button-label, eyebrow, link-cta, text-lead */
  --font-size-menu-item:      14px;
  --line-height-menu-item:    1.30;
  --letter-spacing-menu-item: 0.12em;

  --font-size-button-label:      16px;
  --line-height-button-label:    1.5;
  --letter-spacing-button-label: 0.06em; /* sprawdzić */

  --font-size-eyebrow:      14px;
  --line-height-eyebrow:    1.35;
  --letter-spacing-eyebrow: 0.10em;

  --font-size-overline:      14px;
  --line-height-overline:    1.35;
  --letter-spacing-overline: 0.12em;

  --font-size-text-lead:      20px;
  --line-height-text-lead:    1.6;

  --font-size-link-cta:      16px;
  --line-height-link-cta:    1.5;
  --letter-spacing-link-cta: 0.02em;
	  
  }
}
/* TABLET OVERRIDES */

@media (max-width: 1024px) {
  :root {
    --font-size-h1: 44px;
    --line-height-h1: 1.20;
    --letter-spacing-h1: 0;

    --font-size-h2: 30px;
    --line-height-h2: 1.30;
    --letter-spacing-h2: 0.01em;

    --font-size-h3: 22px;
    --line-height-h3: 1.40;
    --letter-spacing-h3: 0.02em;

    --font-size-body-base: 17px;

    --font-size-body-small: 15px;
    --line-height-body-small: 1.6;

    --font-size-menu-item: 14px;
    --font-size-eyebrow:   13px;
    --font-size-overline:  13px;

    --font-size-text-lead: 18px;

    --font-size-link-cta:  15px;
  }
}

/* iPAD OVERRIDES */

@media (max-width: 768px) {
  :root {
    --font-size-h1: 34px;
    --line-height-h1: 1.25;
    --letter-spacing-h1: 0.01em;

    --font-size-h2: 26px;
    --line-height-h2: 1.35;
    --letter-spacing-h2: 0.02em;

    --font-size-h3: 20px;
    --line-height-h3: 1.45;
    --letter-spacing-h3: 0.03em;

    --font-size-body-base: 16px;
    --line-height-body-base: 1.65;
    --letter-spacing-body-base: 0.01em;

    --font-size-body-small: 15px;
    --line-height-body-small: 1.65;
    --letter-spacing-body-small: 0.03em;

    --font-size-menu-item: 14px;
    --font-size-eyebrow:   12px;
    --font-size-overline:  12px;

    --font-size-text-lead: 17px;
    --letter-spacing-text-lead: 0.01em;

    --font-size-link-cta:  14px;
  }
}

/* MOBILE OVERRIDES */ 
@media (max-width: 599px) {
  :root {
    --font-size-menu-item: 20px;
	--line-height-menu-item:2.60;
	--letter-spacing-menu-item: 0.12em;
  }
}

/* GRID / CONTAINER (layout.grid) */
:root {
  --layout-container-max-width: 1400px;
  --layout-grid-column-gap: var(--space-400);
  --layout-grid-row-gap: var(--space-1000);
  --layout-container-padding-x-NOUSE: var(--space-600);
  --layout-header-padding-x: var(--space-450);
  --header-height: 80px;
}

@media (max-width: 1540px) {
  :root {
  --layout-container-max-width: 1200px;
  --layout-grid-column-gap: var(--space-400);
  --layout-grid-row-gap: var(--space-900);
  --layout-container-padding-x-NOUSE: var(--space-600);
  --layout-header-padding-x: var(--space-400);
  --header-height: 80px;
}
}

@media (max-width: 1199px) {
	:root {
  --layout-container-max-width: 960px;
  --layout-grid-column-gap: var(--space-300);
  --layout-grid-row-gap: var(--space-800);
  --layout-container-padding-x-NOUSE-only4Mobile: var(--space-500);
  --layout-header-padding-x: var(--space-400);
  --header-height: 72px;
}
}

@media (max-width: 959px) {
	:root {
  --layout-container-max-width: 100%;
  --layout-grid-column-gap: var(--space-200);
  --layout-grid-row-gap: var(--space-800);
  --layout-container-padding-x: var(--space-400);
  --layout-header-padding-x: var(--space-400);
  --header-height: 64px;
}
}

@media (max-width: 768px) {
	:root {
  --layout-header-padding-x: var(--space-300);
  --header-height: 64px;
}
}

/*HEADER TOKENS Temps*/

:root {
  --header-height-desktop: 80px;
  --header-height-mobile: 64px; 

  --header-padding-x-desktop: 32px;/* --layout-header-padding-x */
  --header-padding-x-mobile: 20px;/* --layout-header-padding-x */

  /* Domyślne (nadpisywane przez wariant light/dark) */
  --header-bg-color: rgba(255, 255, 255, 0.96);
  --header-text-color: #111111;
  --header-border-color: rgba(0, 0, 0, 0.06);
  --header-link-muted: rgba(0, 0, 0, 0.64);

}

@media (max-width: 959px) {
	:root {
  
}
}
/* EFFECTS / ELEVATIONS */

:root {
  /* Base shadow tokens */
  --shadow-base-image-light: 0px 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-base-image-light-border: 0px 0px 0px 1px rgba(0, 0, 0, 0.05);

  --shadow-base-image-medium: 0px 4px 16px rgba(0, 0, 0, 0.08);

  --shadow-base-image-dark: 0px 8px 24px rgba(0, 0, 0, 0.10);
}

:root {
  /* Image shadows — alias tokens */
  --shadow-image-light: 
    var(--shadow-base-image-light), 
    var(--shadow-base-image-light-border);
	
  --shadow-image-light-no-border: 
    var(--shadow-base-image-light);

  --shadow-image-medium: 
    var(--shadow-base-image-medium);

  --shadow-image-dark: 
    var(--shadow-base-image-dark);

  /* Generic elevation tokens */
  --shadow-elevation-sm: var(--shadow-image-light);
  --shadow-elevation-md: var(--shadow-image-medium);
  --shadow-elevation-lg: var(--shadow-image-dark);

  /* Hover shadow token (optional, can be adjusted later) */
  --shadow-hover: var(--shadow-image-medium);
}