@prozorro/prozorro-ui 0.0.5 → 0.0.6-beta

package/src/styles/_reset.scss

@@ -2,8 +2,8 @@ body {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  color: var(--black);
-  font-size: var(--size-m);
+  color: var(--pz-color-text-primary);
+  font-size: var(--pz-font-size-16);
 }
 
 html {

package/src/styles/_spacing.scss

@@ -0,0 +1,56 @@
+$spacing-properties: (
+  "m": margin,
+  "mt": margin-top,
+  "mr": margin-right,
+  "mb": margin-bottom,
+  "ml": margin-left,
+  "mx": margin-inline,
+  "my": margin-block,
+  "p": padding,
+  "pt": padding-top,
+  "pr": padding-right,
+  "pb": padding-bottom,
+  "pl": padding-left,
+  "px": padding-inline,
+  "py": padding-block,
+);
+$spacing-scale: (
+  "0": var(--pz-space-0),
+  "4": var(--pz-space-4),
+  "8": var(--pz-space-8),
+  "16": var(--pz-space-16),
+  "20": var(--pz-space-20),
+  "24": var(--pz-space-24),
+  "32": var(--pz-space-32),
+  "40": var(--pz-space-40),
+  "44": var(--pz-space-44),
+  "60": var(--pz-space-60),
+);
+
+@each $utility, $property in $spacing-properties {
+  @each $token, $value in $spacing-scale {
+    .pz-#{$utility}-#{$token} {
+      #{$property}: $value;
+    }
+  }
+}
+
+.pz-m-auto {
+  margin: auto;
+}
+
+.pz-mx-auto {
+  margin-inline: auto;
+}
+
+.pz-my-auto {
+  margin-block: auto;
+}
+
+.pz-ml-auto {
+  margin-left: auto;
+}
+
+.pz-mr-auto {
+  margin-right: auto;
+}

package/src/styles/abstract/_mixins.scss

@@ -38,7 +38,7 @@ $breakpoints: (
 @mixin range-slider-thumb {
   width: 10%;
   height: 10px;
-  background: var(--blue-200);
+  background: var(--pz-color-button-primary);
   cursor: pointer;
 }
 
@@ -48,3 +48,19 @@ $breakpoints: (
     outline-offset: 2px;
   }
 }
+
+@mixin pz-container($max-width: var(--pz-grid-frame-max-width), $padding-inline: var(--pz-grid-margin)) {
+  width: min(100%, #{$max-width});
+  padding-inline: $padding-inline;
+  margin-inline: auto;
+}
+
+@mixin pz-grid($columns: var(--pz-grid-columns), $gap: var(--pz-grid-gutter)) {
+  display: grid;
+  grid-template-columns: repeat($columns, minmax(0, 1fr));
+  gap: $gap;
+}
+
+@mixin pz-grid-span($span) {
+  grid-column: span $span;
+}

package/src/styles/abstract/_typography.scss

@@ -7,79 +7,79 @@
 // ─── Desktop ──────────────────────────────────────────────────────────────────
 
 @mixin typography-h1-bold {
-  font-size: var(--size-xxl); // 44px
+  font-size: var(--pz-font-size-44); // 44px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h1-regular {
-  font-size: var(--size-xxl); // 44px
+  font-size: var(--pz-font-size-44); // 44px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h2-bold {
-  font-size: var(--size-xxlss); // 32px
+  font-size: var(--pz-font-size-32); // 32px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h3-bold {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h3-regular {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h4-regular {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h4-semibold {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-h4-bold {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-subtitle {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-body-regular {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-body-semibold {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-body-bold {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-capitalized {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
   text-transform: uppercase;
@@ -87,52 +87,52 @@
 }
 
 @mixin typography-hint {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
-  color: var(--gray-900);
+  color: var(--pz-color-text-secondary);
 }
 
 @mixin typography-line-through {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
   text-decoration: line-through;
 }
 
 @mixin typography-small-regular {
-  font-size: var(--size-xs); // 12px
+  font-size: var(--pz-font-size-12); // 12px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-small-semibold {
-  font-size: var(--size-xs); // 12px
+  font-size: var(--pz-font-size-12); // 12px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-small-bold {
-  font-size: var(--size-xs); // 12px
+  font-size: var(--pz-font-size-12); // 12px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-link {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
-  color: var(--blue-100);
+  color: var(--pz-color-text-link);
   text-decoration: underline;
   cursor: pointer;
 
   &:hover {
-    color: var(--blue);
+    color: var(--pz-color-text-link-hover);
   }
 }
 
 @mixin typography-document {
-  font-size: var(--size-s); // 14px
+  font-size: var(--pz-font-size-14); // 14px
   font-weight: 400;
   line-height: 1.5;
 }
@@ -142,61 +142,61 @@
 // @include max-media-devices("sm") { @include typography-h1-bold-mobile; }
 
 @mixin typography-h1-bold-mobile {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h1-regular-mobile {
-  font-size: var(--size-xl); // 24px
+  font-size: var(--pz-font-size-24); // 24px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h2-bold-mobile {
-  font-size: var(--size-xls); // 20px
+  font-size: var(--pz-font-size-20); // 20px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h2-regular-mobile {
-  font-size: var(--size-xls); // 20px
+  font-size: var(--pz-font-size-20); // 20px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h3-bold-mobile {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h3-semibold-mobile {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-h3-regular-mobile {
-  font-size: var(--size-l); // 18px
+  font-size: var(--pz-font-size-18); // 18px
   font-weight: 400;
   line-height: 1.5;
 }
 
 @mixin typography-h4-bold-mobile {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 700;
   line-height: 1.5;
 }
 
 @mixin typography-h4-semibold-mobile {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 600;
   line-height: 1.5;
 }
 
 @mixin typography-h4-regular-mobile {
-  font-size: var(--size-m); // 16px
+  font-size: var(--pz-font-size-16); // 16px
   font-weight: 400;
   line-height: 1.5;
 }

package/src/styles/abstract/_variables.scss

@@ -1,59 +1,150 @@
 :root {
   // Colors
-  --white: #fff;
-  --black: #242638;
-  --black-tansparent: rgb(36 38 56 / 70%);
-  --gray: #f5f5f5;
-  --gray-100: #d6dade;
-  --gray-200: #939393;
-  --gray-300: #f0f4f5;
-  --gray-400: #f4f8f9;
-  --gray-500: #454545;
-  --gray-600: #f8f8f8;
-  --gray-700: rgb(214 218 222 / 50%);
-  --gray-800: #c2d8de;
-  --gray-900: #6d6d6d;
-  --gray-950: #c0c0c0;
-  --blue: #014da8;
-  --blue-100: #2070d1;
-  --blue-200: #c2d8de;
-  --blue-300: #006887;
-  --blue-400: #6dc8eb;
-  --green: #599a4f;
-  --green-100: #bfffb2;
-  --green-200: #e2f7dc;
-  --green-300: #40e81e;
-  --green-400: #89db33;
-  --red: #d70c17;
-  --red-100: #e55166;
-  --red-200: #e85d57;
-  --red-300: #ff3800;
-  --red-400: #f00;
-  --orange: #ef9400;
-  --orange-100: #e56101;
-  --orange-200: #ff831a;
+  // Raw colors
+  --pz-color-white: #fff;
+  --pz-color-black-90: #242638;
+  --pz-color-grey-20: #f5f5f5;
+  --pz-color-grey-30: #d6dade;
+  --pz-color-grey-40: #c0c0c0;
+  --pz-color-grey-60: #6d6d6d;
+  --pz-color-blue-10: #f0f4f5;
+  --pz-color-blue-30: #c2d8de;
+  --pz-color-blue-50: #2070d1;
+  --pz-color-blue-60: #014da8;
+  --pz-color-red-30: #f7dcdc;
+  --pz-color-red-40: #e85d57;
+  --pz-color-red-50: #ff3800;
+  --pz-color-red-60: #d70c17;
+  --pz-color-orange-50: #ff831a;
+  --pz-color-orange-60: #e86a00;
+  --pz-color-green-20: #e2f7dc;
+  --pz-color-green-30: #89db33;
+  --pz-color-green-50: #599a4f;
+  --pz-color-green-60: #4c8344;
+  --pz-color-gradient-blue: #0082fc;
+  --pz-color-gradient-green: #599a4f;
+  --pz-color-gradient-orange: #ff831a;
+
+  // Gradients
+  --pz-gradient-blue: linear-gradient(90deg, var(--pz-color-gradient-blue) 0%, var(--pz-color-white) 100%);
+  --pz-gradient-green: linear-gradient(90deg, var(--pz-color-gradient-green) 0%, var(--pz-color-white) 100%);
+  --pz-gradient-orange: linear-gradient(90deg, var(--pz-color-gradient-orange) 0%, var(--pz-color-white) 100%);
+
+  // Usage tokens: text
+  --pz-color-text-primary: var(--pz-color-black-90);
+  --pz-color-text-secondary: var(--pz-color-grey-60);
+  --pz-color-text-link: var(--pz-color-blue-50);
+  --pz-color-text-link-hover: var(--pz-color-blue-60);
+  --pz-color-text-link-disabled: var(--pz-color-grey-40);
+
+  // Usage tokens: buttons
+  --pz-color-button-danger: var(--pz-color-red-50);
+  --pz-color-button-danger-hover: var(--pz-color-red-60);
+  --pz-color-button-primary: var(--pz-color-blue-50);
+  --pz-color-button-primary-hover: var(--pz-color-blue-60);
+  --pz-color-button-success-light: var(--pz-color-green-30);
+  --pz-color-button-success: var(--pz-color-green-50);
+  --pz-color-button-success-hover: var(--pz-color-green-60);
+  --pz-color-button-alert: var(--pz-color-orange-50);
+  --pz-color-button-alert-hover: var(--pz-color-orange-60);
+  --pz-color-button-disabled: var(--pz-color-grey-40);
+
+  // Usage tokens: status
+  --pz-color-status-inactive: var(--pz-color-red-50);
+  --pz-color-status-hidden: var(--pz-color-orange-50);
+  --pz-color-status-active: var(--pz-color-green-50);
+  --pz-color-status-monitoring: var(--pz-color-green-30);
+  --pz-color-status-disabled: var(--pz-color-grey-40);
+  --pz-color-status-progress: var(--pz-color-blue-50);
+  --pz-gradient-status-auction-progress: var(--pz-gradient-blue);
+  --pz-gradient-status-auction-waiting: var(--pz-gradient-orange);
+  --pz-gradient-status-auction-success: var(--pz-gradient-green);
+
+  // Usage tokens: background
+  --pz-color-background-primary: var(--pz-color-white);
+  --pz-color-background-frame: var(--pz-color-grey-20);
+  --pz-color-background-hover: var(--pz-color-blue-10);
+
+  // Usage tokens: tags
+  --pz-color-tag-green: var(--pz-color-green-20);
+  --pz-color-tag-grey: var(--pz-color-grey-30);
+  --pz-color-tag-blue: var(--pz-color-blue-30);
+  --pz-color-tag-red: var(--pz-color-red-30);
+
+  // Usage tokens: stroke
+  --pz-color-stroke-red: var(--pz-color-red-60);
+  --pz-color-stroke-grey: var(--pz-color-grey-30);
+
+  // Usage tokens: icons
+  --pz-color-icon-primary: var(--pz-color-blue-50);
+  --pz-color-icon-hover: var(--pz-color-blue-60);
+  --pz-color-icon-danger: var(--pz-color-red-50);
+  --pz-color-icon-danger-hover: var(--pz-color-red-60);
+  --pz-color-icon-success-light: var(--pz-color-green-30);
+  --pz-color-icon-success: var(--pz-color-green-50);
+  --pz-color-icon-success-hover: var(--pz-color-green-60);
+  --pz-color-icon-alert: var(--pz-color-orange-50);
+  --pz-color-icon-alert-hover: var(--pz-color-orange-60);
+  --pz-color-icon-disabled: var(--pz-color-grey-40);
+
+  // Usage tokens: misc
+  --pz-color-auction-red-text: var(--pz-color-red-40);
 
   // Font sizes
-  --size-xxl: 44px;
-  --size-xxls: 40px;
-  --size-xxlss: 32px;
-  --size-xl: 24px;
-  --size-xls: 20px;
-  --size-l: 18px;
-  --size-m: 16px;
-  --size-s: 14px;
-  --size-xs: 12px;
-
-  // Line height
-  --line-height-s: 20px;
-  --line-height-m: 24px;
-  --line-height-l: 28px;
-
-  // Blocks
-  --tooltip-width: 415px;
-  --tender-list-title-width: 387px;
-  --tender-list-title-box-width: 340px;
-
-  // Spacing
-  --row-horzontal-padding: 10px; // general .row wrapper style
+  --pz-font-size-44: 44px;
+  --pz-font-size-32: 32px;
+  --pz-font-size-24: 24px;
+  --pz-font-size-20: 20px;
+  --pz-font-size-18: 18px;
+  --pz-font-size-16: 16px;
+  --pz-font-size-14: 14px;
+  --pz-font-size-12: 12px;
+
+  // Spacing scale
+  --pz-space-0: 0;
+  --pz-space-4: 4px;
+  --pz-space-8: 8px;
+  --pz-space-16: 16px;
+  --pz-space-20: 20px;
+  --pz-space-24: 24px;
+  --pz-space-32: 32px;
+  --pz-space-40: 40px;
+  --pz-space-44: 44px;
+  --pz-space-60: 60px;
+
+  // Grid system
+  --pz-grid-columns-mobile: 4;
+  --pz-grid-columns-tablet: 8;
+  --pz-grid-columns-desktop: 12;
+  --pz-grid-gutter-mobile: 16px;
+  --pz-grid-gutter-tablet: 24px;
+  --pz-grid-gutter-desktop: 24px;
+  --pz-grid-margin-mobile: 16px;
+  --pz-grid-margin-tablet: 32px;
+  --pz-grid-margin-desktop: 80px;
+  --pz-grid-frame-max-width-mobile: 100%;
+  --pz-grid-frame-max-width-tablet: 768px;
+  --pz-grid-frame-max-width-desktop: 1440px;
+  --pz-grid-columns: var(--pz-grid-columns-mobile);
+  --pz-grid-gutter: var(--pz-grid-gutter-mobile);
+  --pz-grid-margin: var(--pz-grid-margin-mobile);
+  --pz-grid-frame-max-width: var(--pz-grid-frame-max-width-mobile);
+}
+
+@media (width >= 768px) {
+  :root {
+    --pz-grid-columns: var(--pz-grid-columns-tablet);
+    --pz-grid-gutter: var(--pz-grid-gutter-tablet);
+    --pz-grid-margin: var(--pz-grid-margin-tablet);
+    --pz-grid-frame-max-width: var(--pz-grid-frame-max-width-tablet);
+  }
+}
+
+@media (width >= 1200px) {
+  :root {
+    --pz-grid-columns: var(--pz-grid-columns-desktop);
+    --pz-grid-gutter: var(--pz-grid-gutter-desktop);
+    --pz-grid-margin: var(--pz-grid-margin-desktop);
+    --pz-grid-frame-max-width: var(--pz-grid-frame-max-width-desktop);
+  }
 }

package/src/styles/main.scss

@@ -4,4 +4,7 @@
 @use "vendors/normalize" as *;
 @use "vendors/google-material-icons" as *;
 
+@use "./colors";
+@use "./spacing";
+@use "./grid";
 @use "./reset";

package/src/styles/vendors/_google-material-icons.scss

@@ -20,7 +20,7 @@
   font-family: "Material Icons", sans-serif;
   font-weight: normal;
   font-style: normal;
-  font-size: var(--size-m);
+  font-size: var(--pz-font-size-16);
   line-height: inherit;
   letter-spacing: normal;
   text-transform: none;

package/dist/app/assets/PzText-H75Z6Lud.css

@@ -1 +0,0 @@
-.pz-text-demo{display:grid;gap:20px;padding:clamp(20px,2vw,28px);border:1px solid rgba(194,216,222,.95);border-radius:28px;background:linear-gradient(180deg,#fffffffa,#f4f8f9f5),linear-gradient(135deg,rgba(1,77,168,.04),transparent 40%);box-shadow:0 20px 70px #2426381a,inset 0 1px #fffffffa}.pz-text-demo-header{display:flex;align-items:end;justify-content:space-between;gap:16px}.pz-text-demo-eyebrow,.pz-text-board-eyebrow,.pz-text-board-group-kicker,.pz-text-board-variant,.pz-text-board-chip{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.pz-text-demo-eyebrow,.pz-text-board-eyebrow,.pz-text-board-group-kicker{color:var(--blue)}.pz-text-demo-title,.pz-text-board-title,.pz-text-board-group-title{margin:0;color:var(--black)}.pz-text-demo-title{font-size:clamp(22px,2vw,28px);line-height:1.2}.pz-text-demo-spec,.pz-text-board-spec{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-900)}.pz-text-demo-surface{position:relative;padding:clamp(24px,3vw,44px);border-radius:22px;background:var(--white);box-shadow:inset 0 0 0 1px #d6dadebf,0 18px 40px #24263814}.pz-text-demo-surface:before{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(rgba(1,77,168,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(1,77,168,.04) 1px,transparent 1px);background-size:28px 28px;border-radius:inherit;content:"";-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.22),transparent 64%);mask-image:linear-gradient(180deg,rgba(0,0,0,.22),transparent 64%);pointer-events:none}.pz-text-board{display:grid;gap:22px}.pz-text-board-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:20px;align-items:stretch}.pz-text-board-hero-copy,.pz-text-board-hero-preview,.pz-text-board-group{padding:clamp(22px,2vw,30px);border:1px solid rgba(194,216,222,.92);border-radius:28px;background:linear-gradient(180deg,#fffffffa,#f4f8f9f5),linear-gradient(135deg,rgba(1,77,168,.04),transparent 38%);box-shadow:0 18px 60px #24263814,inset 0 1px #fffffff5}.pz-text-board-hero-copy{display:grid;align-content:center;gap:16px}.pz-text-board-title{font-size:clamp(32px,4vw,48px);line-height:1.05;max-width:12ch}.pz-text-board-description{margin:0;max-width:60ch;font-size:15px;line-height:1.7;color:var(--gray-500)}.pz-text-board-hero-preview{display:grid;align-content:start;gap:20px;background:radial-gradient(circle at top right,rgba(1,77,168,.08),transparent 28%),linear-gradient(180deg,#fffffffa,#f4f8f9f5)}.pz-text-board-chip{justify-self:start;padding:9px 12px;border-radius:999px;background:#014da814;color:var(--blue)}.pz-text-board-group{display:grid;gap:18px}.pz-text-board-group-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.pz-text-board-group-title{font-size:20px;line-height:1.35}.pz-text-board-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pz-text-board-card{display:grid;gap:16px;padding:18px;min-height:122px;border:1px solid rgba(214,218,222,.88);border-radius:22px;background:#fffffff0;box-shadow:0 12px 34px #2426380f}.pz-text-board-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.pz-text-board-variant{color:var(--blue)}@media (width <= 1024px){.pz-text-board-hero,.pz-text-board-grid{grid-template-columns:1fr}}@media (width <= 640px){.pz-text-demo-header,.pz-text-board-meta{flex-direction:column;align-items:start}.pz-text-board-hero-copy,.pz-text-board-hero-preview,.pz-text-board-group,.pz-text-demo{padding:20px;border-radius:22px}}.pz-text[data-v-bd3b2150]{margin:0;padding:0}.pz-text--h1-bold[data-v-bd3b2150]{font-size:var(--size-xxl);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h1-bold[data-v-bd3b2150]{font-size:var(--size-xl);font-weight:700;line-height:1.5}}.pz-text--h1-regular[data-v-bd3b2150]{font-size:var(--size-xxl);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h1-regular[data-v-bd3b2150]{font-size:var(--size-xl);font-weight:400;line-height:1.5}}.pz-text--h2-bold[data-v-bd3b2150]{font-size:var(--size-xxlss);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h2-bold[data-v-bd3b2150]{font-size:var(--size-xls);font-weight:700;line-height:1.5}}.pz-text--h3-bold[data-v-bd3b2150]{font-size:var(--size-xl);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h3-bold[data-v-bd3b2150]{font-size:var(--size-l);font-weight:700;line-height:1.5}}.pz-text--h3-regular[data-v-bd3b2150]{font-size:var(--size-xl);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h3-regular[data-v-bd3b2150]{font-size:var(--size-l);font-weight:400;line-height:1.5}}.pz-text--h4-regular[data-v-bd3b2150]{font-size:var(--size-l);font-weight:400;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-regular[data-v-bd3b2150]{font-size:var(--size-m);font-weight:400;line-height:1.5}}.pz-text--h4-semibold[data-v-bd3b2150]{font-size:var(--size-l);font-weight:600;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-semibold[data-v-bd3b2150]{font-size:var(--size-m);font-weight:600;line-height:1.5}}.pz-text--h4-bold[data-v-bd3b2150]{font-size:var(--size-l);font-weight:700;line-height:1.5}@media (max-width: 575.98px){.pz-text--h4-bold[data-v-bd3b2150]{font-size:var(--size-m);font-weight:700;line-height:1.5}}.pz-text--subtitle[data-v-bd3b2150]{font-size:var(--size-m);font-weight:600;line-height:1.5}.pz-text--body-regular[data-v-bd3b2150]{font-size:var(--size-s);font-weight:400;line-height:1.5}.pz-text--body-semibold[data-v-bd3b2150]{font-size:var(--size-s);font-weight:600;line-height:1.5}.pz-text--body-bold[data-v-bd3b2150]{font-size:var(--size-s);font-weight:700;line-height:1.5}.pz-text--capitalized[data-v-bd3b2150]{font-size:var(--size-s);font-weight:400;line-height:1.5;text-transform:uppercase;letter-spacing:.05em}.pz-text--hint[data-v-bd3b2150]{font-size:var(--size-s);font-weight:400;line-height:1.5;color:var(--gray-900)}.pz-text--line-through[data-v-bd3b2150]{font-size:var(--size-s);font-weight:400;line-height:1.5;text-decoration:line-through}.pz-text--small-regular[data-v-bd3b2150]{font-size:var(--size-xs);font-weight:400;line-height:1.5}.pz-text--small-semibold[data-v-bd3b2150]{font-size:var(--size-xs);font-weight:600;line-height:1.5}.pz-text--small-bold[data-v-bd3b2150]{font-size:var(--size-xs);font-weight:700;line-height:1.5}.pz-text--link[data-v-bd3b2150]{font-size:var(--size-s);font-weight:400;line-height:1.5;color:var(--blue-100);text-decoration:underline;cursor:pointer}.pz-text--link[data-v-bd3b2150]:hover{color:var(--blue)}.pz-text--document[data-v-bd3b2150]{font-size:var(--size-s);font-weight:400;line-height:1.5}