/* ==========================================================
   CENTRÁLNÍ TYPOGRAFIE + DESIGN SYSTEM   tstba.cz
   Joomla 5/6 + Cassiopeia + Bootstrap 5
   (optimalizováno: BS5 .h1–.h6 + .display-* + .btn-primary/.btn-secondary)
   ========================================================== */

/* ==========================================================
   1) TYPOGRAPHY SCALE (Acme Gothic Compressed headings + Inter Tight body)
   - H1 má 2 velikosti: 100px (default) + 120px (varianta)
   - H3 má 2 velikosti: 36px (default) + 48px (varianta)
   - H2: 82px
   - H4: 32/40 (subtitle/subheading – původní S1)
   - H5/H6 bereme jako subtitle
   - Responsivně přes clamp (mobile→desktop) logicky odvozeno
   ========================================================== */

:root{
  /* Fonts */
  --ff-body: "Inter Tight", var(--cassiopeia-font-family-body, system-ui), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-head: "Acme Gothic Compressed", var(--cassiopeia-font-family-headings, system-ui), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Letter spacing */
  --typo-letter-spacing: 0;

  /* ===== Headings (DESKTOP targets) =====
     H1: 100/74 (uppercase, 600)
     H1 (variant): 120/92
     H2: 82/66 (uppercase, 400)
     H3: 36/36 (default) + 48/48 (variant)
     H4: 32/40 (subtitle – ex S1)
     H5: 24/32 (subtitle – ex S2)
     H6: 22/30
  */

  /* Desktop → Mobile (logicky odvozeno) */
  --typo-h1-fs:    clamp(64px,  calc(48px + 3.2vw),  100px);
  --typo-h1-lh:    clamp(52px,  calc(40px + 2.4vw),   74px);

  --typo-h1xl-fs:  clamp(76px,  calc(56px + 4.0vw),  120px);
  --typo-h1xl-lh:  clamp(60px,  calc(44px + 3.0vw),   92px);

  --typo-h2-fs:    clamp(48px,  calc(34px + 3.2vw),   82px);
  --typo-h2-lh:    clamp(40px,  calc(30px + 2.4vw),   66px);

  --typo-h3-fs:    clamp(24px,  calc(20px + 1.0vw),   36px);
  --typo-h3-lh:    clamp(24px,  calc(20px + 1.0vw),   36px);

  --typo-h3xl-fs:  clamp(32px,  calc(26px + 1.6vw),   48px);
  --typo-h3xl-lh:  clamp(32px,  calc(26px + 1.6vw),   48px);

  /* H4: 32/40 desktop → 24/32 mobile (= původní S1) */
  --typo-h4-fs:    clamp(24px,  calc(21.44px + 0.64vw),  32px);
  --typo-h4-lh:    clamp(32px,  calc(29.44px + 0.64vw),  40px);

  /* Subtitles (H5/H6) – z původních S2/S3 */
  --typo-h5-fs:    clamp(20px,  calc(18px + 0.6vw),   24px);
  --typo-h5-lh:    clamp(28px,  calc(26px + 0.6vw),   32px);

  --typo-h6-fs:    clamp(18px,  calc(16px + 0.5vw),   22px);
  --typo-h6-lh:    clamp(26px,  calc(24px + 0.5vw),   30px);

  /* ===== Subtitles (S1/S2/S3 – Deer kompatibilní) =====
     S1: 32/40 desktop → 24/32 mobile
     S2: 24/32 desktop → 18/26 mobile
     S3: 18/26 (stabilní)
  */
  --typo-s1-fs:    clamp(24px,  calc(20.571428571px + 0.952380952vw),  32px);
  --typo-s1-lh:    clamp(32px,  calc(28.571428571px + 0.952380952vw),  40px);

  --typo-s2-fs:    clamp(18px,  calc(15.428571429px + 0.714285714vw),  24px);
  --typo-s2-lh:    clamp(26px,  calc(23.428571429px + 0.714285714vw),  32px);

  --typo-s3-fs:    clamp(16px,  calc(15.142857143px + 0.238095238vw),  18px);
  --typo-s3-lh:    clamp(24px,  calc(23.142857143px + 0.238095238vw),  26px);

  /* Quote – 40/48 desktop → 32/40 mobile */
  --typo-quote-fs: clamp(32px,  calc(28.571428571px + 0.952380952vw),  40px);
  --typo-quote-lh: clamp(40px,  calc(36.571428571px + 0.952380952vw),  48px);

  /* Body / Captions / Label / Button (ponecháváme kompatibilně) */
  /* Body 16/24 (Inter Tight, 400) */
  --typo-b0-fs: 16px;
  --typo-b0-lh: 24px;
  --typo-b1-fs: 14px;
  --typo-b1-lh: 22px;

  --typo-c1-fs: 14px;
  --typo-c1-lh: 22px;

  --typo-c2-fs: 12px;
  --typo-c2-lh: 20px;

  --typo-label-fs: 12px;
  --typo-label-lh: 20px;

  --typo-btn-fs: 12px;
  --typo-btn-lh: 20px;

  /* Weights */
  --typo-w-h1:  600; /* H1 semibold */
  --typo-w-h2:  400;
  --typo-w-h34: 400;
  --typo-w-body: 400;
  --typo-w-ui:   500;

  /* Bootstrap base */
  --bs-body-font-family: var(--ff-body);
  --bs-body-font-size: var(--typo-b1-fs);
  --bs-body-line-height: 1.5;

  /* Headings color (zadání) */
  --c-heading: #E3E3E3;

  --template-bg-light: var(--c-surface);
  --template-text-dark: var(--color-text);
  --template-text-light: var(--c-surface);
  --template-link-color: var(--link-color);
  --template-special-color: var(--color-primary);
}

/* Font family helpers */
.ff-body{ font-family: var(--ff-body) !important; }
.ff-head{ font-family: var(--ff-head) !important; }

/* ===== BS5-equivalent headings (.h1–.h6) + element headings ===== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  font-family: var(--ff-head);
  letter-spacing: var(--typo-letter-spacing);
  color: var(--c-heading);
  margin-bottom: .5rem; /* BS-like */
}

/* H1 (100/74) */
h1, .h1{
  font-size: var(--typo-h1-fs);
  line-height: var(--typo-h1-lh);
  font-weight: var(--typo-w-h1);
  text-transform: uppercase;
}

/* H1 varianta (120/92) – "větší H1" */
.typo-h1-xl,
.display-1{ /* BS5 display-1 = největší */
  font-family: var(--ff-head);
  font-size: var(--typo-h1xl-fs);
  line-height: var(--typo-h1xl-lh);
  font-weight: var(--typo-w-h1);
  letter-spacing: var(--typo-letter-spacing);
  text-transform: uppercase;
  color: var(--c-heading);
}

/* H2 (82/66) */
h2, .h2,
.display-2{ /* BS5 display-2 mapneme na H2 look */
  font-size: var(--typo-h2-fs);
  line-height: var(--typo-h2-lh);
  font-weight: var(--typo-w-h2);
  text-transform: uppercase;
}

/* H3 default (36/36) */
h3, .h3,
.display-4{ /* rozumné mapování */
  font-size: var(--typo-h3-fs);
  line-height: var(--typo-h3-lh);
  font-weight: var(--typo-w-h34);
}

/* H3 varianta (48/48) */
.typo-h3-xl,
.display-3{ /* BS5 display-3 mapneme na větší H3 */
  font-family: var(--ff-head);
  font-size: var(--typo-h3xl-fs);
  line-height: var(--typo-h3xl-lh);
  font-weight: var(--typo-w-h34);
  letter-spacing: var(--typo-letter-spacing);
  color: var(--c-heading);
}

/* H4 (32/40) – subtitle / ex S1 */
h4, .h4,
.display-5{
  font-size: var(--typo-h4-fs);
  line-height: var(--typo-h4-lh);
  font-weight: var(--typo-w-h34);
}

/* Subtitles */
h5, .h5,
.display-6{
  font-size: var(--typo-h5-fs);
  line-height: var(--typo-h5-lh);
  font-weight: var(--typo-w-h34);
}
h6, .h6{
  font-size: var(--typo-h6-fs);
  line-height: var(--typo-h6-lh);
  font-weight: var(--typo-w-h34);
}
/* Inter Tight 16px / 400 / Regular */
.typo-body{
  font-family: var(--ff-body) !important;
  font-size: var(--typo-b0-fs) !important;
  line-height: var(--typo-b0-lh) !important;
  font-weight: var(--typo-w-body) !important; /* = 400 */
  letter-spacing: var(--typo-letter-spacing);
}
/* ===== Utility classes (ponecháme i "typo-*" styl) ===== */
.typo-h1{  font-family: var(--ff-head); font-size: var(--typo-h1-fs);   line-height: var(--typo-h1-lh);   font-weight: var(--typo-w-h1);  text-transform: uppercase; color: var(--c-heading); }
.typo-h2{  font-family: var(--ff-head); font-size: var(--typo-h2-fs);   line-height: var(--typo-h2-lh);   font-weight: var(--typo-w-h2);  text-transform: uppercase; color: var(--c-heading); }
.typo-h3{  font-family: var(--ff-head); font-size: var(--typo-h3-fs);   line-height: var(--typo-h3-lh);   font-weight: var(--typo-w-h34); color: var(--c-heading); }
.typo-h4{  font-family: var(--ff-head); font-size: var(--typo-h4-fs);   line-height: var(--typo-h4-lh);   font-weight: var(--typo-w-h34); color: var(--c-heading); }
.typo-h5{  font-family: var(--ff-head); font-size: var(--typo-h5-fs);   line-height: var(--typo-h5-lh);   font-weight: var(--typo-w-h34); color: var(--c-heading); }
.typo-h6{  font-family: var(--ff-head); font-size: var(--typo-h6-fs);   line-height: var(--typo-h6-lh);   font-weight: var(--typo-w-h34); color: var(--c-heading); }

/* ===== Subtitles (Deer-kompatibilní utility) ===== */
.typo-s1{ font-family: var(--ff-body); font-size: var(--typo-s1-fs); line-height: var(--typo-s1-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing); }
.typo-s2{ font-family: var(--ff-body); font-size: var(--typo-s2-fs); line-height: var(--typo-s2-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing); }
.typo-s3{ font-family: var(--ff-body); font-size: var(--typo-s3-fs); line-height: var(--typo-s3-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing); }

/* ===== Quote ===== */
.typo-quote{ font-family: var(--ff-body); font-size: var(--typo-quote-fs); line-height: var(--typo-quote-lh); font-weight: var(--typo-w-ui); letter-spacing: var(--typo-letter-spacing); }

/* ===== Body / Caption / Label / Button utility ===== */
/* B1 = 16/24 (větší body – pozor: .typo-body je totéž jako .typo-b1) */
.typo-b1{    font-family: var(--ff-body); font-size: var(--typo-b0-fs);    line-height: var(--typo-b0-lh);    font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); }
/* C1 = 14/22 */
.typo-c1{    font-family: var(--ff-body); font-size: var(--typo-c1-fs);    line-height: var(--typo-c1-lh);    font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); }
/* C2 = 12/20 */
.typo-c2{    font-family: var(--ff-body); font-size: var(--typo-c2-fs);    line-height: var(--typo-c2-lh);    font-weight: var(--typo-w-body); letter-spacing: var(--typo-letter-spacing); }
/* Label = 12/20 (500) */
.typo-label{ font-family: var(--ff-body); font-size: var(--typo-label-fs); line-height: var(--typo-label-lh); font-weight: var(--typo-w-ui);   letter-spacing: var(--typo-letter-spacing); }
/* Button = 12/20 (500) */
.typo-btn{   font-family: var(--ff-body); font-size: var(--typo-btn-fs);   line-height: var(--typo-btn-lh);   font-weight: var(--typo-w-ui);   letter-spacing: var(--typo-letter-spacing); }

/* Body / small / labels */
body{ font-family: var(--ff-body); font-size: var(--typo-b1-fs); line-height: var(--typo-b1-lh); }
.small, small{
  font-size: var(--typo-c1-fs);
  line-height: var(--typo-c1-lh);
}
.form-label, .control-label, .form-check-label{
  font-size: var(--typo-label-fs);
  line-height: var(--typo-label-lh);
  font-weight: var(--typo-w-ui);
}

/* =========================================
   Border radius – design systém override
   ========================================= */
.rounded-4{ border-radius: 8px !important; }
.rounded-5{ border-radius: 16px !important; }


/* ==========================================================
   2) DESIGN SYSTEM (nové barvy)
   ========================================================== */

:root{
  /* Core palette */
  --c-primary:   #ED0C32; /* primary red */
  --c-secondary: #E3E3E3; /* secondary light */
  --c-black:     #000000;
  --c-white:     #FFFFFF;

  /* Soft fills */
  --c-primary-20: rgba(237, 12, 50, 0.20); /* #ED0C3233 */
  --c-secondary-20: rgba(227, 227, 227, 0.20); /* #E3E3E333 */
  --c-muted-10: rgba(102, 102, 102, 0.10); /* #6666661A */

  /* Semantic */
  --color-bg:      var(--c-black);
  --color-text:    var(--c-secondary);
  --color-primary: var(--c-primary);
  --color-secondary: var(--c-secondary);
  --color-text-muted: #666666;
  --on-primary:    var(--c-white);
  --on-secondary:  var(--c-black);

  /* Links (primary-based) */
  --link-color:       var(--c-primary);
  --link-hover:       color-mix(in srgb, var(--c-primary) 85%, #000);
  --link-focus-ring:  0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent);

  /* Focus ring (jemně červený) */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent);

  /* Shadow */
  --shadow-1: 0 0 20px color-mix(in srgb, var(--c-primary) 15%, transparent);

  /* Compatibility token */
  --secondary-color: var(--c-secondary);
}

/* Color utilities (bg/text) – rychlé použití ve view */
.bg-primary{    background-color: var(--c-primary) !important; }
.bg-secondary{  background-color: var(--c-secondary) !important; }
.bg-primary-soft{ background-color: var(--c-primary-20) !important; }
.bg-secondary-soft{ background-color: var(--c-secondary-20) !important; }
.bg-black{      background-color: var(--c-black) !important; }
.bg-white{      background-color: var(--c-white) !important; }
.bg-muted-10{   background-color: var(--c-muted-10) !important; } /* #6666661A */

.text-primary{   color: var(--c-primary) !important; }
.text-secondary{ color: var(--c-secondary) !important; }
.text-black{     color: var(--c-black) !important; }
.text-white{     color: var(--c-white) !important; }
.text-muted{  color: var(--color-text-muted) !important; }
/* Base surface */
body{
  background: var(--color-bg);
  color: var(--color-text);
}

/* ==========================================================
   3) BUTTONS (BS5: .btn-primary / .btn-secondary / .btn-outline-*)
   - "buttony budou jako byly" = pill, 44px, uppercase, gap 10
   - focus = hover (jak jsi chtěl dřív)
   ========================================================== */

.btn{
  font-family: var(--ff-body);
  font-size: var(--typo-btn-fs);
  line-height: var(--typo-btn-lh);
  font-weight: var(--typo-w-ui);
  letter-spacing: var(--typo-letter-spacing);
  text-transform: uppercase;
  text-align: center;

  border-radius: 40px;
  padding: 12px 24px;
  min-height: 44px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* PRIMARY (červený) */
.btn-primary{
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--on-primary);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:focus-visible{
  background: color-mix(in srgb, var(--c-primary) 85%, #000); /* o chlup tmavší */
  border-color: color-mix(in srgb, var(--c-primary) 85%, #000);
  color: var(--on-primary);
  box-shadow: none; /* focus=hover */
  outline: none;
}

/* SECONDARY (světlý) */
.btn-secondary{
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--on-secondary);
}
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:focus-visible{
  background: color-mix(in srgb, var(--c-secondary) 85%, #000); /* lehce ztmav */
  border-color: color-mix(in srgb, var(--c-secondary) 85%, #000);
  color: var(--on-secondary);
  box-shadow: none; /* focus=hover */
  outline: none;
}

/* OUTLINE PRIMARY */
.btn-outline-primary{
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible{
  background: var(--c-primary-20);
  border-color: var(--c-primary);
  color: var(--c-primary);
  box-shadow: none;
  outline: none;
}

/* OUTLINE SECONDARY */
.btn-outline-secondary{
  background: transparent;
  border-color: var(--c-secondary);
  color: var(--c-secondary);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary:focus,
.btn-outline-secondary:focus-visible{
  background: color-mix(in srgb, var(--c-secondary) 15%, transparent);
  border-color: var(--c-secondary);
  color: var(--c-secondary);
  box-shadow: none;
  outline: none;
}

/* Disabled */
.btn:disabled,
.btn.disabled{
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none;
}
.btn-primary:disabled,
.btn-primary.disabled{
  background: color-mix(in srgb, var(--c-primary) 40%, transparent);
  border-color: transparent;
  color: var(--on-primary);
}
.btn-secondary:disabled,
.btn-secondary.disabled{
  background: color-mix(in srgb, var(--c-secondary) 55%, transparent);
  border-color: transparent;
  color: color-mix(in srgb, var(--on-secondary) 55%, transparent);
}

/* Icon in button */
.btn .btn-icon,
.btn .icon{
  inline-size: 16px;
  block-size: 16px;
  vertical-align: -0.15em;
}

/* ==========================================================
   4) BADGE – BASE + VARIANTY
   ZÁKLAD (ponechán): height:32; gap:10; padding:8 12; radius:30
   Varianty řeší jen barvy.
   ========================================================== */

/* Base: rozměry + typografie (neměnit ve variantách) */
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 32px;
  padding: 8px 12px;
  border-radius: 30px;

  font-family: var(--ff-body);
  font-size: var(--typo-c2-fs);
  line-height: var(--typo-c2-lh);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;

  text-decoration: none;
  white-space: nowrap;

  /* BS5 badge mívá font-size menší; necháme tvůj DS */
}

/* Varianta 1: SOFT PRIMARY (tvůj původní) */
.badge-primary{
  background: var(--c-primary-20); /* #ED0C3233 */
  color: var(--c-primary);
}

/* Varianta 2: SOFT SECONDARY / "šedý" badge (#E3E3E333) */
.badge-secondary{
  background: var(--c-secondary-20); /* #E3E3E333 */
  color: var(--c-secondary);
}

/* ==========================================================
   5) SPACING – ponecháno (tvé --space-* + přepisy BS mezer)
   (Níže vloženo BEZE ZMĚN z tvého bloku)
   ========================================================== */

:root{
  --space-2r: clamp(1.25rem, calc(0.928571429rem + 1.428571429vw), 2rem);
}

:root {
  /* Breakpointy pro interpolaci (můžeš změnit) */
  --fluid-from: 320px;   /* úzký mobil */
  --fluid-to:   992px;   /* hranice lg (>=992 desktop) */

  --fluid-range: 672px; /* 992-320 (pro stabilni deleni) */

  /* Jediné, co typicky budeš ladit: */
  --space-5-max: 48px;  /* desktop velikost pro "5" */
  --space-5-min:  25px;  /* mobilní velikost pro "5" */
  --space-6-max: 96px;  /* desktop velikost pro "5" */
  --space-6-min:  50px;  /* mobilní velikost pro "5" */

  /* Proporce podle Bootstrap spacing škály (5=3rem; 4=1.5; 3=1; 2=.5; 1=.25) */
  --k-5: 1;
  --k-4: 0.5;          /* 1.5 / 3 */
  --k-3: 0.3333333;    /* 1 / 3 */
  --k-2: 0.1666667;    /* 0.5 / 3 */
  --k-1: 0.0833333;    /* 0.25 / 3 */

  /* Firefox-safe fluid spacing (původní výsledek zachován; bez dělení délkami) */
  --space-6: clamp(3rem, calc(1.571428571rem + 7.142857143vw), 6rem);
  --space-5: clamp(25px, calc(14.047619048px + 3.422619048vw), 48px);
  --space-4: clamp(12.5px, calc(7.023809524px + 1.711309524vw), 24px);
  --space-3: clamp(8.333333333px, calc(4.682539683px + 1.140873016vw), 16px);
  --space-2: clamp(4.166666667px, calc(2.341269841px + 0.570436508vw), 8px);
  --space-1: clamp(2.083333333px, calc(1.170634921px + 0.285218254vw), 4px);
}

/* Přepisujeme jen pod 992px (desktop necháváme být) */
.p-6  { padding: var(--space-6-max) !important; }
.px-6 { padding-left: var(--space-6-max) !important; padding-right: var(--space-6-max) !important; }
.py-6 { padding-top: var(--space-6-max) !important; padding-bottom: var(--space-6-max) !important; }
.pt-6 { padding-top: var(--space-6-max) !important; }
.pb-6 { padding-bottom: var(--space-6-max) !important; }
.ps-6 { padding-left: var(--space-6-max) !important; }
.pe-6 { padding-right: var(--space-6-max) !important; }

/* (pokud chceš i margin) */
.m-6  { margin: var(--space-6-max) !important; }
.mx-6 { margin-left: var(--space-6-max) !important; margin-right: var(--space-6-max) !important; }
.my-6 { margin-top: var(--space-6-max) !important; margin-bottom: var(--space-6-max) !important; }
.mt-6 { margin-top: var(--space-6-max) !important; }
.mb-6 { margin-bottom: var(--space-6-max) !important; }
.ms-6 { margin-left: var(--space-6-max) !important; }
.me-6 { margin-right: var(--space-6-max) !important; }

/* (pokud chceš i gap-6) */
.gap-6 { gap: var(--space-6) !important; }
.row-gap-6 { row-gap: var(--space-6-max) !important; }
.column-gap-6 { column-gap: var(--space-6-max) !important; }

@media (max-width: 991.98px) {
  .p-6  { padding: var(--space-6) !important; }
  .px-6 { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-6 { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .pt-6 { padding-top: var(--space-6) !important; }
  .pb-6 { padding-bottom: var(--space-6) !important; }
  .ps-6 { padding-left: var(--space-6) !important; }
  .pe-6 { padding-right: var(--space-6) !important; }

  .m-6  { margin: var(--space-6) !important; }
  .mx-6 { margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-6 { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .mt-6 { margin-top: var(--space-6) !important; }
  .mb-6 { margin-bottom: var(--space-6) !important; }
  .ms-6 { margin-left: var(--space-6) !important; }
  .me-6 { margin-right: var(--space-6) !important; }

  .gap-6 { gap: var(--space-6) !important; }
  .row-gap-6 { row-gap: var(--space-6) !important; }
  .column-gap-6 { column-gap: var(--space-6) !important; }

  /* ====== MARGINS 5..1 ====== */
  .m-5  { margin: var(--space-5) !important; }
  .mx-5 { margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-5 { margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .mt-5 { margin-top: var(--space-5) !important; }
  .mb-5 { margin-bottom: var(--space-5) !important; }
  .ms-5 { margin-left: var(--space-5) !important; }
  .me-5 { margin-right: var(--space-5) !important; }

  .m-4  { margin: var(--space-4) !important; }
  .mx-4 { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-4 { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .mt-4 { margin-top: var(--space-4) !important; }
  .mb-4 { margin-bottom: var(--space-4) !important; }
  .ms-4 { margin-left: var(--space-4) !important; }
  .me-4 { margin-right: var(--space-4) !important; }

  .m-3  { margin: var(--space-3) !important; }
  .mx-3 { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-3 { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .mt-3 { margin-top: var(--space-3) !important; }
  .mb-3 { margin-bottom: var(--space-3) !important; }
  .ms-3 { margin-left: var(--space-3) !important; }
  .me-3 { margin-right: var(--space-3) !important; }

  .m-2  { margin: var(--space-2) !important; }
  .mx-2 { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-2 { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .mt-2 { margin-top: var(--space-2) !important; }
  .mb-2 { margin-bottom: var(--space-2) !important; }
  .ms-2 { margin-left: var(--space-2) !important; }
  .me-2 { margin-right: var(--space-2) !important; }

  .m-1  { margin: var(--space-1) !important; }
  .mx-1 { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-1 { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .mt-1 { margin-top: var(--space-1) !important; }
  .mb-1 { margin-bottom: var(--space-1) !important; }
  .ms-1 { margin-left: var(--space-1) !important; }
  .me-1 { margin-right: var(--space-1) !important; }

  /* ====== PADDINGS 5..1 ====== */
  .p-5  { padding: var(--space-5) !important; }
  .px-5 { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-5 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .pt-5 { padding-top: var(--space-5) !important; }
  .pb-5 { padding-bottom: var(--space-5) !important; }
  .ps-5 { padding-left: var(--space-5) !important; }
  .pe-5 { padding-right: var(--space-5) !important; }

  .p-4  { padding: var(--space-4) !important; }
  .px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-4 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .pt-4 { padding-top: var(--space-4) !important; }
  .pb-4 { padding-bottom: var(--space-4) !important; }
  .ps-4 { padding-left: var(--space-4) !important; }
  .pe-4 { padding-right: var(--space-4) !important; }

  .p-3  { padding: var(--space-3) !important; }
  .px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-3 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .pt-3 { padding-top: var(--space-3) !important; }
  .pb-3 { padding-bottom: var(--space-3) !important; }
  .ps-3 { padding-left: var(--space-3) !important; }
  .pe-3 { padding-right: var(--space-3) !important; }

  .p-2  { padding: var(--space-2) !important; }
  .px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-2 { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .pt-2 { padding-top: var(--space-2) !important; }
  .pb-2 { padding-bottom: var(--space-2) !important; }
  .ps-2 { padding-left: var(--space-2) !important; }
  .pe-2 { padding-right: var(--space-2) !important; }

  .p-1  { padding: var(--space-1) !important; }
  .px-1 { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-1 { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .pt-1 { padding-top: var(--space-1) !important; }
  .pb-1 { padding-bottom: var(--space-1) !important; }
  .ps-1 { padding-left: var(--space-1) !important; }
  .pe-1 { padding-right: var(--space-1) !important; }

  /* ====== GAP (Bootstrap .gap-1..5) ====== */
  .gap-5 { gap: var(--space-5) !important; }
  .gap-4 { gap: var(--space-4) !important; }
  .gap-3 { gap: var(--space-3) !important; }
  .gap-2 { gap: var(--space-2) !important; }
  .gap-1 { gap: var(--space-1) !important; }

  .row-gap-5 { row-gap: var(--space-5) !important; }
  .row-gap-4 { row-gap: var(--space-4) !important; }
  .row-gap-3 { row-gap: var(--space-3) !important; }
  .row-gap-2 { row-gap: var(--space-2) !important; }
  .row-gap-1 { row-gap: var(--space-1) !important; }

  .column-gap-5 { column-gap: var(--space-5) !important; }
  .column-gap-4 { column-gap: var(--space-4) !important; }
  .column-gap-3 { column-gap: var(--space-3) !important; }
  .column-gap-2 { column-gap: var(--space-2) !important; }
  .column-gap-1 { column-gap: var(--space-1) !important; }
}