[data-btn-type="primary"] {  
  /* 🧱 Normal */
  --btn-normal-bg:var(--accent-primary);
  --btn-normal-foreground:var(--text-heading-inverse);
  --btn-normal-ico-foreground:var(--base-color-red);
  --btn-normal-ico-bg:var(--text-heading-inverse);
  --btn-normal-border-color:var(--base-color-red);
  --btn-normal-border-width:0;

  /* 🧱 Hover */
  --btn-hover-bg:var(--accent-primary-hover);
  --btn-hover-foreground:var(--text-heading-inverse);
  --btn-hover-ico-foreground:var(--base-color-red);
  --btn-hover-ico-bg:var(--text-heading-inverse);
  --btn-hover-border-color:var(--base-color-red);
  --btn-hover-border-width:0;

  /* 🧱 Disabled */
  --btn-disabled-bg:var(--accent-primary-disabled);
  --btn-disabled-foreground:var(--text-heading-inverse);
  --btn-disabled-ico-foreground:var(--base-color-red);
  --btn-disabled-ico-bg:var(--text-heading-inverse);
  --btn-disabled-border-color:transparent;
  --btn-disabled-border-width:0;
}



[data-btn-type="secondary"] {  
  /* 🧱 Normal */
  --btn-normal-bg:var(--accent-secondary);
  --btn-normal-foreground:var(--accent-secondary-foreground);
  --btn-normal-ico-foreground:var(--text-heading-inverse);
  --btn-normal-ico-bg:var(--accent-secondary-border);
  --btn-normal-border-color:var(--accent-secondary-border);
  --btn-normal-border-width:3px;

  /* 🧱 Hover */
  --btn-hover-bg:var(--accent-secondary-border);
  --btn-hover-foreground:var(--text-heading-inverse);
  --btn-hover-ico-foreground:var(--text-heading-inverse);
  --btn-hover-ico-bg:var(--accent-secondary-foreground);
  --btn-hover-border-color:var(--accent-secondary-border);
  --btn-hover-border-width:3px;

  /* 🧱 Disabled */
  --btn-disabled-bg:var(--accent-secondary-disabled);
  --btn-disabled-foreground:var(--color-red-200);
  --btn-disabled-ico-foreground:var(--base-color-red);
  --btn-disabled-ico-bg:var(--text-heading-inverse);
  --btn-disabled-border-color:var(--color-red-200);
  --btn-disabled-border-width:3px;
}


:root{
/* =========================================================
  🧩 Buttons - colors and sizes
========================================================= */ 
     --button-primary-color: var(--basic-color-white);
     --button-primary-back: var(--gradient-cta); /*--gradient-cta/*
     --button-primary-border: 0px solid #fff;

     /* extra large */
     --button-xl-font: var(--fw-600) var(--fs-xl)/var(--lh-120) var(--ff-button);
     --button-xl-ls: var(--ls-055);
     --button-xl-padding: var(--space-8) var(--space-48);
     --button-xl-br: var(--br-32);
     --button-xl-ico-width: var(--space-24);
     --button-xl-ico-height: var(--space-24);
     --button-l-ico-sm-width: var(--space-20);
     --button-l-ico-sm-height: var(--space-20);
     --button-xl-gap: var(--space-12);
     --button-xl-height: var(--icon-size-56);

     /* large */
     --button-l-font: var(--fw-600) var(--fs-m)/var(--lh-120) var(--ff-button);
     --button-l-ls: var(--ls-055);
     --button-l-padding: var(--space-8) var(--space-32);
     --button-l-br: var(--br-24);
     --button-l-ico-width: var(--space-20);
     --button-l-ico-height: var(--space-20);
     --button-l-ico-sm-width: var(--space-16);
     --button-l-ico-sm-height: var(--space-16);
     --button-l-ico-padding: var(--space-4);
     --button-l-gap: var(--space-16);
     --button-l-height: var(--icon-size-52);

     /* medium */
     --button-m-font: var(--fw-600) var(--fs-s)/var(--lh-120) var(--ff-button);
     --button-m-ls: var(--ls-055);
     --button-m-padding: var(--space-8) var(--space-24);
     --button-m-br: var(--br-24);
     --button-m-ico-width: var(--space-18);
     --button-m-ico-height: var(--space-18);
     --button-m-ico-sm-width: var(--space-12);
     --button-m-ico-sm-height: var(--space-12);
     --button-m-ico-padding: var(--space-4);
     --button-m-gap: var(--space-16);
     --button-m-height: var(--icon-size-36);

     /* small*/
     --button-s-font: var(--fw-600) var(--fs-s)/var(--lh-120) var(--ff-button);
     --button-s-ls: var(--ls-055);
     --button-s-padding: var(--space-8) var(--space-16);
     --button-s-br: var(--br-24);
     --button-s-ico-width: var(--space-16);
     --button-s-ico-height: var(--space-16);
     --button-s-ico-sm-width: var(--space-12);
     --button-s-ico-sm-height: var(--space-12);
     --button-s-ico-padding: var(--space-4);
     --button-s-gap: var(--space-8);
     --button-s-height: var(--icon-size-24);

     /* extra small*/
     --button-xs-font: var(--fw-600) var(--fs-xs)/var(--lh-120) var(--ff-button);
     --button-xs-ls: var(--ls-055);
     --button-xs-padding: var(--space-8) var(--space-12);
     --button-xs-br: var(--br-24);
     --button-xs-ico-width: var(--icon-size-16);
     --button-xs-ico-height: var(--icon-size-16);
     --button-xs-ico-sm-width: var(--space-12);
     --button-xs-ico-sm-height: var(--space-12);
     --button-xs-ico-padding: var(--space-4);
     --button-xs-gap: var(--space-8); 
     --button-xs-height: var(--icon-size-24);
}

/* =========================================================
  🧩 Buttons
========================================================= */ 
.btn { display: inline-flex; cursor: pointer; align-items:center; justify-content:center; overflow:hidden; }


/* =========================================================
  🧩 Buttons - Sizes
========================================================= */ 
/* buttons - XL */
.btn--xl { -webkit-border-radius:var(--button-xl-br); -moz-border-radius:var(--button-xl-br); border-radius: var(--button-xl-br); cursor:pointer; align-items: center; gap:var(--button-xl-gap); padding: var(--button-xl-padding); min-height: var(--button-xl-height); }
.btn--xl .btn--label { font: var(--button-xl-font); letter-spacing: var(--button-xl-ls) }
.btn--xl.btn--with-icon .btn--icon { border-radius:50%; padding:2px; }
.btn--xl.btn--with-icon .btn--icon-svg { height:var(--button-m-ico-height); width:var(--button-m-ico-width); border-radius:50%; padding:2px; }

/* XL - icon alone */
.btn--xl.btn--icon-only { min-width:var(--button-xl-height); min-height: var(--button-xl-height); border-radius:50%; }
.btn--xl.btn--icon-only .btn--icon { padding:var(--button-xl-ico-padding); }
.btn--xl.btn--icon-only .btn--icon .btn--icon-svg { width:var(--button-xl-ico-width); height:var(--button-xl-ico-width); }

/* Obramowanie gradientowe */
.btn--secondary::before { border-radius: var(--button-xl-br); padding: 3px; }
.btn--secondary::after { border-radius: var(--button-xl-br); }






/* buttons - L */
.btn--l { -webkit-border-radius:var(--button-l-br); -moz-border-radius:var(--button-l-br); border-radius: var(--button-l-br); cursor:pointer; align-items: center; gap:var(--button-l-gap); padding: var(--button-l-padding); min-height: var(--button-l-height); }
.btn--l .btn--label { font: var(--button-l-font); letter-spacing: var(--button-l-ls) }
.btn--l.btn--with-icon .btn--icon { border-radius:50%; padding:var(--button-l-ico-padding); }
.btn--l.btn--with-icon .btn--icon-svg { height:var(--button-l-ico-sm-height); width:var(--button-l-ico-sm-width); }
/* L - icon alone */
.btn--l.btn--icon-only { min-width:var(--button-l-height); min-height: var(--button-l-height); border-radius:50%; }
.btn--l.btn--icon-only .btn--icon { padding:var(--button-l-ico-padding); }
.btn--l.btn--icon-only .btn--icon .btn--icon-svg { width:var(--button-l-ico-width); height:var(--button-l-ico-width);  }


/* buttons - M */
.btn--m { -webkit-border-radius:var(--button-m-br); -moz-border-radius:var(--button-m-br); border-radius: var(--button-m-br); cursor:pointer; align-items: center; gap:var(--button-m-gap); padding: var(--button-m-padding); min-height: var(--button-m-height); }
.btn--m .btn--label { font: var(--button-m-font); letter-spacing: var(--button-m-ls) }
.btn--m.btn--with-icon .btn--icon { border-radius:50%; padding:4px; }
.btn--m.btn--with-icon .btn--icon-svg { height:var(--button-m-ico-height); width:var(--button-m-ico-width); border-radius:50%; padding:var(--button-m-ico-padding); }

.btn--m.btn--icon-only { min-width:var(--button-m-height); min-height: var(--button-m-height); padding:0; border-radius:50%; }
.btn--m.btn--icon-only .btn--icon { padding:var(--button-m-ico-padding); }
.btn--m.btn--icon-only .btn--icon .btn--icon-svg { width:var(--button-m-ico-width); height:var(--button-m-ico-width); }


/* buttons - S */
.btn--s { -webkit-border-radius:var(--button-s-br); -moz-border-radius:var(--button-s-br); border-radius: var(--button-s-br); cursor:pointer; align-items: center; gap:var(--button-s-gap); padding: var(--button-s-padding); min-height: var(--button-s-height); }
.btn--s .btn--label { font: var(--button-s-font); letter-spacing: var(--button-s-ls) }
.btn--s.btn--with-icon .btn--icon { border-radius:50%; padding:2px; }
.btn--s.btn--with-icon .btn--icon-svg { height:var(--button-s-ico-height); width:var(--button-s-ico-width); border-radius:50%; padding:2px; }

.btn--s.btn--icon-only { min-width:var(--button-s-height); min-height: var(--button-s-height); padding:0; border-radius:50%; }
.btn--s.btn--icon-only .btn--icon { padding:var(--button-s-ico-padding); }
.btn--s.btn--icon-only .btn--icon .btn--icon-svg { width:var(--button-s-ico-width); height:var(--button-s-ico-width); }


/* buttons - XS */
.btn--xs { -webkit-border-radius:var(--button-xs-br); -moz-border-radius:var(--button-xs-br); border-radius: var(--button-xs-br); cursor:pointer; align-items: center; gap:var(--button-xs-gap); padding: var(--button-xs-padding); min-height: var(--button-xs-height); }
.btn--xs .btn--label { font: var(--button-xs-font); letter-spacing: var(--button-xs-ls) }
.btn--xs.btn--with-icon .btn--icon { border-radius:50%; padding:2px; }
.btn--xs.btn--with-icon .btn--icon-svg { height:var(--button-xs-ico-height); width:var(--button-xs-ico-width); border-radius:50%; padding:2px; }

.btn--xs.btn--icon-only { min-width:var(--button-xs-height); min-height: var(--button-xs-height); padding:0; border-radius:50%; }
.btn--xs.btn--icon-only .btn--icon { padding:var(--button-xs-ico-padding); }
.btn--xs.btn--icon-only .btn--icon .btn--icon-svg { width:var(--button-xs-ico-width); height:var(--button-xs-ico-width); }


/* =========================================================
  🧩 Button - Primary
========================================================= */ 
.btn--primary { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; }
.btn--primary { border-color:var(--btn-normal-border-width) solid var(--btn-normal-border-color); background:var(--btn-normal-bg); color: var(--btn-normal-foreground); fill: var(--btn-normal-ico-foreground); }
.btn--primary { transition: transform var(--transition-time) ease, background var(--transition-time) ease, color var(--transition-time) ease, border-color var(--transition-time) ease, opacity var(--transition-time) ease; background-clip: padding-box; overflow: hidden; z-index: 1; }

/* gradient layer (pseudo-element) */
.btn--primary::before { content: ""; position: absolute; inset: 0; background: var(--btn-normal-bg); }
.btn--primary::before { background-size: 200% 200%; background-position: 0% 50%; opacity: 0; transition: opacity var(--transition-time) ease; z-index: 0; pointer-events: none; }

/* zapewnij, że tekst jest nad pseudo-elementem */
.btn--primary .btn--label,
.btn--primary > * { position: relative; z-index: 2; }
.btn--primary .btn--label { width:100% }

/* =========================================================
  🧩 Button - Primary with icon
========================================================= */ 
.btn--primary.btn--with-icon .label { width:auto; text-align:left; }
.btn--primary.btn--with-icon .btn--icon { background:var(--btn-normal-ico-bg); }
.btn--primary.btn--with-icon .btn--icon-svg { color:var(--btn-normal-ico-foreground); }


/* buttons - icon alone */

.btn--icon-only { padding: 0; flex: 0 0 auto; }
.btn--icon-only .btn--label { display:none; }

/* XL */
.btn--xl.btn--icon-only { width:var(--button-xl-height) !important; height:var(--button-xl-height); gap: var(--button-xl-gap); }
.btn--xl .btn--icon { width:var(--button-x-ico-width); height:var(--button-xl-ico-width);  }


/* =========================================================
  🧭 Button - Primary - Hover
========================================================= */ 
.btn--primary:hover { transform: translateY(-2px); background: var(--btn-hover-bg); color: var(--btn-hover-foreground); border-color: var(--btn-hover-border-color); border-width: var(--btn-hover-border-width); fill: var(--btn-hover-ico-foreground); }
.btn--primary:hover::before { opacity: 1; animation: gradient-move calc(var(--transition-time) * 2) linear infinite; }
/* keyframes: płynne przesuwanie gradientu prawo/lewo/prawo */

/* =========================================================
  🚫 Button - Primary - Disabled
========================================================= */ 
.btn--primary.disabled, 
.btn--primary:disabled, 
.btn--primary[disabled] { cursor: not-allowed; /* opacity: 0.8; */ transform: none; background: var(--btn-disabled-bg); color: var(--btn-disabled-foreground); border-color: var(--btn-disabled-border-width) solid var(--btn-disabled-border-color); fill: var(--btn-disabled-ico-foreground); opacity: 0.4; }
.btn--primary:disabled::before,
.btn--primary[disabled]::before { opacity:0; animation:none; }
.btn--primary:disabled .label, 
.btn--primary[disabled] .label { cursor: not-allowed;  }

@keyframes gradient-move {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




/* =========================================================
  🧩 Button - Secondary
========================================================= */ 
/* Główne style przycisku */
.btn--secondary { position: relative; overflow: hidden; transition: transform var(--transition-time) ease; }
.btn--secondary { background: var(--btn-normal-bg); /* kolor tła przycisku */ color: var(--btn-normal-foreground); /* kolor tekstu (fallback) */ fill: var(--btn-normal-ico-foreground); /* kolor ikon */}

/* Obramowanie gradientowe */
.btn--secondary::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.btn--secondary::before { background: var(--btn-normal-border-color); mask: var(--btn-normal-border-color) content-box, var(--btn-normal-border-color); mask-composite: exclude; }


/* Efekt gradientowego tekstu */
.btn--secondary .btn--label { position: relative; z-index: 3; transition: color var(--transition-time) ease; }
.btn--secondary .btn--label { background: var(--btn-normal-border-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; /* fallback */ }

/* Efekt tła przy najechaniu */
.btn--secondary::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; opacity: 0; transform: translate(-50%, -50%); z-index: 0; }
.btn--secondary::after { transition: opacity var(--transition-time) ease, width var(--transition-time) ease, height var(--transition-time) ease; }
.btn--secondary::after { background: var(--btn-normal-border-color); }


/* =========================================================
  🧩 Button - Primary with icon
========================================================= */ 
.btn--secondary.btn--with-icon .btn--icon { background:var(--btn-normal-ico-bg); }
.btn--secondary.btn--with-icon .btn--icon-svg { color:var(--btn-normal-ico-foreground); }



/* =========================================================
  🧭 Button - Primary - Hover
========================================================= */ 
.btn--secondary:hover { transform: translateY(-2px); }
.btn--secondary:hover::after { width: 100%; height: 100%; opacity: 1; }

/* Zmiana koloru tekstu przy hover */
.btn--secondary:hover .btn--label { background: var(--basic-color-white); }
.btn--secondary:hover .btn--label { -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; /* fallback */ }

.btn--secondary.btn--with-icon:hover .btn--icon { background:var(--btn-normal-ico-foreground); z-index:5; }
.btn--secondary.btn--with-icon:hover .btn--icon-svg { color:var(--btn-normal-ico-bg); }




/* buttons - icon alone 

.btn--icon-only { padding: 0; flex: 0 0 auto; }
.btn--icon-only .btn--label { display:none; }*/

/* XL 
.btn--xl.btn--icon-only { width:var(--button-xl-height) !important; height:var(--button-xl-height); gap: var(--button-xl-gap); }
.btn--xl .btn--icon { width:var(--button-x-ico-width); height:var(--button-xl-ico-width);  }
*/

/* =========================================================
  🧭 Button - Primary - Hover
========================================================= */ 
.btn--primary:hover { transform: translateY(-2px); background: var(--btn-hover-bg); color: var(--btn-hover-foreground); border-color: var(--btn-hover-border-color); border-width: var(--btn-hover-border-width); fill: var(--btn-hover-ico-foreground); }
.btn--primary:hover::before { opacity: 1; animation: gradient-move calc(var(--transition-time) * 2) linear infinite; }
/* keyframes: płynne przesuwanie gradientu prawo/lewo/prawo */


/* =========================================================
  🚫 Button - Primary - Disabled
========================================================= */ 
.btn--secondary.disabled, 
.btn--secondary:disabled, 
.btn--secondary[disabled] { cursor: not-allowed; transform:none; animation:none; opacity: 0.4; }

.btn--secondary:disabled .btn--label, 
.btn--secondary[disabled] .btn--label { background: var(--btn-disabled-border-color); cursor: not-allowed; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }

.btn--secondary:disabled::before,
.btn--secondary[disabled]::before { background: var(--btn-disabled-border-color); }

.btn--secondary:disabled::after, 
.btn--secondary[disabled]::after { background:none; transition:none; transform:none; animation:none;}

.btn--secondary.btn--with-icon:disabled  .btn--icon,
.btn--secondary.btn--with-icon[disabled] .btn--icon  { background:var(--btn-disabled-border-color) !important; }

.btn--secondary.btn--with-icon:disabled .btn--icon-svg,
.btn--secondary.btn--with-icon[disabled] { color:var(--btn-disabled-ico-bg); }