@salutejs/sdds-themes 0.13.0-dev.0 → 0.14.0-dev.0

package/css/sdds_dfa__dark.css

@@ -0,0 +1,943 @@
+/* Generated by robots, do not change this manually! */
+
+:root {
+  --text-primary-hover: #F5F5F593;
+  --text-primary-active: #F5F5F5C4;
+  --text-secondary-hover: #F5F5F5FF;
+  --text-secondary-active: #F5F5F5AB;
+  --text-tertiary-hover: #F5F5F5FF;
+  --text-tertiary-active: #F5F5F556;
+  --text-paragraph-hover: #F5F5F57A;
+  --text-paragraph-active: #F5F5F5A3;
+  --text-accent-hover: #17E8ADFF;
+  --text-accent-active: #11B083FF;
+  --text-accent-minor-hover: #ABFCE5FF;
+  --text-accent-minor-active: #70FAD3FF;
+  --text-positive-hover: #2ACB47FF;
+  --text-positive-active: #1F9835FF;
+  --text-warning-hover: #FF8442FF;
+  --text-warning-active: #FF5D05FF;
+  --text-negative-hover: #FF5C6CFF;
+  --text-negative-active: #FF1F35FF;
+  --text-info-hover: #50B1F2FF;
+  --text-info-active: #0F7BC2FF;
+  --text-positive-minor-hover: #64F77FFF;
+  --text-positive-minor-active: #81F897FF;
+  --text-warning-minor-hover: #FDBC96FF;
+  --text-warning-minor-active: #FDCFB4FF;
+  --text-negative-minor-hover: #FFA3ACFF;
+  --text-negative-minor-active: #FFC2C8FF;
+  --text-info-minor-hover: #94D4FFFF;
+  --text-info-minor-active: #B3E0FFFF;
+  --text-primary: #F5F5F5F5;
+  --text-secondary: #F5F5F58F;
+  --text-tertiary: #F5F5F547;
+  --text-paragraph: #F5F5F5CC;
+  --text-accent: #14CC98;
+  --text-positive: #24B23E;
+  --text-warning: #FF7024;
+  --text-negative: #FF3D51;
+  --on-dark-text-primary-hover: #F5F5F593;
+  --on-dark-text-primary-active: #F5F5F5C4;
+  --on-dark-text-secondary-hover: #F5F5F5FF;
+  --on-dark-text-secondary-active: #F5F5F5AB;
+  --on-dark-text-tertiary-hover: #F5F5F5FF;
+  --on-dark-text-tertiary-active: #F5F5F556;
+  --on-dark-text-paragraph-hover: #F5F5F57A;
+  --on-dark-text-paragraph-active: #F5F5F5A3;
+  --on-dark-text-accent-hover: #17E8ADFF;
+  --on-dark-text-accent-active: #11B083FF;
+  --on-dark-text-accent-minor-hover: #ABFCE5FF;
+  --on-dark-text-accent-minor-active: #70FAD3FF;
+  --on-dark-text-positive-hover: #2ACB47FF;
+  --on-dark-text-positive-active: #1F9835FF;
+  --on-dark-text-warning-hover: #FF8442FF;
+  --on-dark-text-warning-active: #FF5D05FF;
+  --on-dark-text-negative-hover: #FF5C6CFF;
+  --on-dark-text-negative-active: #FF1F35FF;
+  --on-dark-text-info-hover: #50B1F2FF;
+  --on-dark-text-info-active: #0F7BC2FF;
+  --on-dark-text-positive-minor-hover: #64F77FFF;
+  --on-dark-text-positive-minor-active: #81F897FF;
+  --on-dark-text-warning-minor-hover: #FDBC96FF;
+  --on-dark-text-warning-minor-active: #FDCFB4FF;
+  --on-dark-text-negative-minor-hover: #FFA3ACFF;
+  --on-dark-text-negative-minor-active: #FFC2C8FF;
+  --on-dark-text-info-minor-hover: #94D4FFFF;
+  --on-dark-text-info-minor-active: #B3E0FFFF;
+  --on-dark-text-primary: #F5F5F5F5;
+  --on-dark-text-secondary: #F5F5F58F;
+  --on-dark-text-tertiary: #F5F5F547;
+  --on-dark-text-paragraph: #F5F5F5CC;
+  --on-dark-text-accent: #14CC98;
+  --on-dark-text-positive: #24B23E;
+  --on-dark-text-warning: #FF7024;
+  --on-dark-text-negative: #FF3D51;
+  --on-light-text-primary-hover: #17171793;
+  --on-light-text-primary-active: #171717C4;
+  --on-light-text-secondary-hover: #171717FF;
+  --on-light-text-secondary-active: #171717AB;
+  --on-light-text-tertiary-hover: #171717FF;
+  --on-light-text-tertiary-active: #17171756;
+  --on-light-text-paragraph-hover: #1717177A;
+  --on-light-text-paragraph-active: #171717A3;
+  --on-light-text-accent-hover: #06B785FF;
+  --on-light-text-accent-active: #047C5AFF;
+  --on-light-text-accent-minor-hover: #10604AFF;
+  --on-light-text-accent-minor-active: #0B4636FF;
+  --on-light-text-positive-hover: #1EB83AFF;
+  --on-light-text-positive-active: #15842AFF;
+  --on-light-text-warning-hover: #FB7223FF;
+  --on-light-text-warning-active: #DC5304FF;
+  --on-light-text-negative-hover: #FF475AFF;
+  --on-light-text-negative-active: #FF0A23FF;
+  --on-light-text-info-hover: #34A7F4FF;
+  --on-light-text-info-active: #096CAEFF;
+  --on-light-text-positive-minor-hover: #155B22FF;
+  --on-light-text-positive-minor-active: #104219FF;
+  --on-light-text-warning-minor-hover: #723613FF;
+  --on-light-text-warning-minor-active: #58290EFF;
+  --on-light-text-negative-minor-hover: #7E1621FF;
+  --on-light-text-negative-minor-active: #64121AFF;
+  --on-light-text-info-minor-hover: #174B6EFF;
+  --on-light-text-info-minor-active: #113A55FF;
+  --on-light-text-primary: #171717F5;
+  --on-light-text-secondary: #1717178F;
+  --on-light-text-tertiary: #17171747;
+  --on-light-text-paragraph: #171717CC;
+  --on-light-text-accent: #05996F;
+  --on-light-text-positive: #1A9E32;
+  --on-light-text-warning: #FA5F05;
+  --on-light-text-negative: #FF293E;
+  --inverse-text-primary-hover: #17171793;
+  --inverse-text-primary-active: #171717C4;
+  --inverse-text-secondary-hover: #171717FF;
+  --inverse-text-secondary-active: #171717AB;
+  --inverse-text-tertiary-hover: #171717FF;
+  --inverse-text-tertiary-active: #17171756;
+  --inverse-text-paragraph-hover: #1717177A;
+  --inverse-text-paragraph-active: #171717A3;
+  --inverse-text-accent-hover: #06B785FF;
+  --inverse-text-accent-active: #047C5AFF;
+  --inverse-text-accent-minor-hover: #10604AFF;
+  --inverse-text-accent-minor-active: #0B4636FF;
+  --inverse-text-positive-hover: #1EB83AFF;
+  --inverse-text-positive-active: #15842AFF;
+  --inverse-text-warning-hover: #FB7223FF;
+  --inverse-text-warning-active: #DC5304FF;
+  --inverse-text-negative-hover: #FF475AFF;
+  --inverse-text-negative-active: #FF0A23FF;
+  --inverse-text-info-hover: #34A7F4FF;
+  --inverse-text-info-active: #096CAEFF;
+  --inverse-text-positive-minor-hover: #155B22FF;
+  --inverse-text-positive-minor-active: #104219FF;
+  --inverse-text-warning-minor-hover: #723613FF;
+  --inverse-text-warning-minor-active: #58290EFF;
+  --inverse-text-negative-minor-hover: #7E1621FF;
+  --inverse-text-negative-minor-active: #64121AFF;
+  --inverse-text-info-minor-hover: #174B6EFF;
+  --inverse-text-info-minor-active: #113A55FF;
+  --inverse-text-primary: #171717F5;
+  --inverse-text-secondary: #1717178F;
+  --inverse-text-tertiary: #17171747;
+  --inverse-text-paragraph: #171717CC;
+  --inverse-text-accent: #05996F;
+  --inverse-text-positive: #1A9E32;
+  --inverse-text-warning: #FA5F05;
+  --inverse-text-negative: #FF293E;
+  --surface-solid-primary-hover: #1C1C1CFF;
+  --surface-solid-primary-active: #121212FF;
+  --surface-solid-secondary-hover: #303030FF;
+  --surface-solid-secondary-active: #212121FF;
+  --surface-solid-tertiary-hover: #404040FF;
+  --surface-solid-tertiary-active: #303030FF;
+  --surface-solid-card-hover: #303030FF;
+  --surface-solid-card-active: #212121FF;
+  --surface-solid-default-hover: #FFFFFFFF;
+  --surface-solid-default-active: #F5F5F5FF;
+  --surface-transparent-primary-hover: #FFFFFF1F;
+  --surface-transparent-primary-active: #FFFFFF0A;
+  --surface-transparent-secondary-hover: #FFFFFF3D;
+  --surface-transparent-secondary-active: #FFFFFF0F;
+  --surface-transparent-tertiary-hover: #FFFFFF52;
+  --surface-transparent-tertiary-active: #FFFFFF24;
+  --surface-transparent-deep-hover: #FFFFFFC2;
+  --surface-transparent-deep-active: #FFFFFF94;
+  --surface-transparent-card-hover: #FFFFFF3D;
+  --surface-transparent-card-active: #FFFFFF0F;
+  --surface-clear-hover: #FFFFFF00;
+  --surface-clear-active: #FFFFFF00;
+  --surface-accent-hover: #00C28BFF;
+  --surface-accent-active: #00A375FF;
+  --surface-accent-minor-hover: #0A3D2FFF;
+  --surface-accent-minor-active: #06231BFF;
+  --surface-transparent-accent-hover: #14CC9866;
+  --surface-transparent-accent-active: #14CC9838;
+  --surface-positive-hover: #28C344FF;
+  --surface-positive-active: #23A93BFF;
+  --surface-warning-hover: #FF8442FF;
+  --surface-warning-active: #FF6A1AFF;
+  --surface-negative-hover: #FF5C6CFF;
+  --surface-negative-active: #FF3347FF;
+  --surface-info-hover: #1798EEFF;
+  --surface-info-active: #1086D5FF;
+  --surface-positive-minor-hover: #0E3A16FF;
+  --surface-positive-minor-active: #08210CFF;
+  --surface-warning-minor-hover: #4F250DFF;
+  --surface-warning-minor-active: #351909FF;
+  --surface-negative-minor-hover: #5B1018FF;
+  --surface-negative-minor-active: #410B11FF;
+  --surface-info-minor-hover: #10344CFF;
+  --surface-info-minor-active: #0A2333FF;
+  --surface-transparent-positive-hover: #1A9E3266;
+  --surface-transparent-positive-active: #1A9E3238;
+  --surface-transparent-warning-hover: #FA5F0566;
+  --surface-transparent-warning-active: #FA5F0538;
+  --surface-transparent-negative-hover: #FF293E66;
+  --surface-transparent-negative-active: #FF293E38;
+  --surface-transparent-info-hover: #118CDF66;
+  --surface-transparent-info-active: #118CDF38;
+  --surface-clear: #FFFFFF00;
+  --surface-solid-card: #262626;
+  --surface-solid-primary: #171717;
+  --surface-solid-secondary: #262626;
+  --surface-solid-tertiary: #363636;
+  --surface-solid-default: #F9F9F9;
+  --surface-accent: #00AC7B;
+  --surface-positive: #24B23E;
+  --surface-warning: #FF7024;
+  --surface-negative: #FF3D51;
+  --surface-transparent-card: #FFFFFF1F;
+  --surface-transparent-primary: #FFFFFF0F;
+  --surface-transparent-secondary: #FFFFFF1F;
+  --surface-transparent-tertiary: #FFFFFF33;
+  --surface-transparent-deep: #FFFFFFA3;
+  --on-dark-surface-solid-primary-hover: #1C1C1CFF;
+  --on-dark-surface-solid-primary-active: #121212FF;
+  --on-dark-surface-solid-secondary-hover: #303030FF;
+  --on-dark-surface-solid-secondary-active: #212121FF;
+  --on-dark-surface-solid-tertiary-hover: #404040FF;
+  --on-dark-surface-solid-tertiary-active: #303030FF;
+  --on-dark-surface-solid-card-hover: #303030FF;
+  --on-dark-surface-solid-card-active: #212121FF;
+  --on-dark-surface-solid-default-hover: #FFFFFFFF;
+  --on-dark-surface-solid-default-active: #F5F5F5FF;
+  --on-dark-surface-transparent-primary-hover: #FFFFFF1F;
+  --on-dark-surface-transparent-primary-active: #FFFFFF0A;
+  --on-dark-surface-transparent-secondary-hover: #FFFFFF3D;
+  --on-dark-surface-transparent-secondary-active: #FFFFFF0F;
+  --on-dark-surface-transparent-tertiary-hover: #FFFFFF52;
+  --on-dark-surface-transparent-tertiary-active: #FFFFFF24;
+  --on-dark-surface-transparent-deep-hover: #FFFFFFC2;
+  --on-dark-surface-transparent-deep-active: #FFFFFF94;
+  --on-dark-surface-transparent-card-hover: #FFFFFF3D;
+  --on-dark-surface-transparent-card-active: #FFFFFF0F;
+  --on-dark-surface-clear-hover: #FFFFFF00;
+  --on-dark-surface-clear-active: #FFFFFF00;
+  --on-dark-surface-accent-hover: #00C28BFF;
+  --on-dark-surface-accent-active: #00A375FF;
+  --on-dark-surface-accent-minor-hover: #0A3D2FFF;
+  --on-dark-surface-accent-minor-active: #06231BFF;
+  --on-dark-surface-transparent-accent-hover: #14CC9866;
+  --on-dark-surface-transparent-accent-active: #14CC9838;
+  --on-dark-surface-positive-hover: #28C344FF;
+  --on-dark-surface-positive-active: #23A93BFF;
+  --on-dark-surface-warning-hover: #FF8442FF;
+  --on-dark-surface-warning-active: #FF6A1AFF;
+  --on-dark-surface-negative-hover: #FF5C6CFF;
+  --on-dark-surface-negative-active: #FF3347FF;
+  --on-dark-surface-info-hover: #1798EEFF;
+  --on-dark-surface-info-active: #1086D5FF;
+  --on-dark-surface-positive-minor-hover: #0E3A16FF;
+  --on-dark-surface-positive-minor-active: #08210CFF;
+  --on-dark-surface-warning-minor-hover: #4F250DFF;
+  --on-dark-surface-warning-minor-active: #351909FF;
+  --on-dark-surface-negative-minor-hover: #5B1018FF;
+  --on-dark-surface-negative-minor-active: #410B11FF;
+  --on-dark-surface-info-minor-hover: #10344CFF;
+  --on-dark-surface-info-minor-active: #0A2333FF;
+  --on-dark-surface-transparent-positive-hover: #1A9E3266;
+  --on-dark-surface-transparent-positive-active: #1A9E3238;
+  --on-dark-surface-transparent-warning-hover: #FA5F0566;
+  --on-dark-surface-transparent-warning-active: #FA5F0538;
+  --on-dark-surface-transparent-negative-hover: #FF293E66;
+  --on-dark-surface-transparent-negative-active: #FF293E38;
+  --on-dark-surface-transparent-info-hover: #118CDF66;
+  --on-dark-surface-transparent-info-active: #118CDF38;
+  --on-dark-surface-clear: #FFFFFF00;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #262626;
+  --on-dark-surface-solid-default: #F9F9F9;
+  --on-dark-surface-accent: #00AC7B;
+  --on-dark-surface-positive: #24B23E;
+  --on-dark-surface-warning: #FF7024;
+  --on-dark-surface-negative: #FF3D51;
+  --on-dark-surface-transparent-card: #FFFFFF1F;
+  --on-dark-surface-transparent-primary: #FFFFFF0F;
+  --on-dark-surface-transparent-secondary: #FFFFFF1F;
+  --on-dark-surface-transparent-tertiary: #FFFFFF33;
+  --on-dark-surface-transparent-deep: #FFFFFFA3;
+  --on-light-surface-solid-primary-hover: #FAFAFAFF;
+  --on-light-surface-solid-primary-active: #F0F0F0FF;
+  --on-light-surface-solid-secondary-hover: #E8E8E8FF;
+  --on-light-surface-solid-secondary-active: #D9D9D9FF;
+  --on-light-surface-solid-tertiary-hover: #D1D1D1FF;
+  --on-light-surface-solid-tertiary-active: #C2C2C2FF;
+  --on-light-surface-solid-card-hover: #FFFFFFFF;
+  --on-light-surface-solid-card-active: #FFFFFFFF;
+  --on-light-surface-solid-default-hover: #0D0D0DFF;
+  --on-light-surface-solid-default-active: #030303FF;
+  --on-light-surface-transparent-primary-hover: #0808080F;
+  --on-light-surface-transparent-primary-active: #08080800;
+  --on-light-surface-transparent-secondary-hover: #0808081F;
+  --on-light-surface-transparent-secondary-active: #0808080A;
+  --on-light-surface-transparent-tertiary-hover: #0808083D;
+  --on-light-surface-transparent-tertiary-active: #0808080F;
+  --on-light-surface-transparent-deep-hover: #080808C2;
+  --on-light-surface-transparent-deep-active: #08080894;
+  --on-light-surface-transparent-card-hover: #FFFFFFFF;
+  --on-light-surface-transparent-card-active: #FFFFFFFF;
+  --on-light-surface-clear-hover: #FFFFFF00;
+  --on-light-surface-clear-active: #FFFFFF00;
+  --on-light-surface-accent-hover: #05AD7EFF;
+  --on-light-surface-accent-active: #048F68FF;
+  --on-light-surface-accent-minor-hover: #7AF5D2FF;
+  --on-light-surface-accent-minor-active: #4BF1C2FF;
+  --on-light-surface-transparent-accent-hover: #05996F66;
+  --on-light-surface-transparent-accent-active: #05996F38;
+  --on-light-surface-positive-hover: #1DAF37FF;
+  --on-light-surface-positive-active: #18952FFF;
+  --on-light-surface-warning-hover: #FB7223FF;
+  --on-light-surface-warning-active: #F05B05FF;
+  --on-light-surface-negative-hover: #FF475AFF;
+  --on-light-surface-negative-active: #FF1F35FF;
+  --on-light-surface-info-hover: #1798EEFF;
+  --on-light-surface-info-active: #1086D5FF;
+  --on-light-surface-positive-minor-hover: #8AF59DFF;
+  --on-light-surface-positive-minor-active: #6EF286FF;
+  --on-light-surface-warning-minor-hover: #FFDECCFF;
+  --on-light-surface-warning-minor-active: #FFCAADFF;
+  --on-light-surface-negative-minor-hover: #FED7DBFF;
+  --on-light-surface-negative-minor-active: #FEC3C9FF;
+  --on-light-surface-info-minor-hover: #C7E9FFFF;
+  --on-light-surface-info-minor-active: #A8DCFFFF;
+  --on-light-surface-transparent-positive-hover: #1A9E3266;
+  --on-light-surface-transparent-positive-active: #1A9E3238;
+  --on-light-surface-transparent-warning-hover: #FA5F0566;
+  --on-light-surface-transparent-warning-active: #FA5F0538;
+  --on-light-surface-transparent-negative-hover: #FF293E66;
+  --on-light-surface-transparent-negative-active: #FF293E38;
+  --on-light-surface-transparent-info-hover: #118CDF66;
+  --on-light-surface-transparent-info-active: #118CDF38;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #DDDDDD;
+  --on-light-surface-solid-tertiary: #C7C7C7;
+  --on-light-surface-solid-card: #FFFFFFFF;
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-clear: #FFFFFF00;
+  --on-light-surface-accent: #05996F;
+  --on-light-surface-positive: #1A9E32;
+  --on-light-surface-warning: #FA5F05;
+  --on-light-surface-negative: #FF293E;
+  --on-light-surface-transparent-card: #FFFFFFFF;
+  --on-light-surface-transparent-primary: #08080805;
+  --on-light-surface-transparent-secondary: #0808080F;
+  --on-light-surface-transparent-tertiary: #0808081F;
+  --on-light-surface-transparent-deep: #080808A3;
+  --inverse-surface-solid-primary-hover: #FAFAFAFF;
+  --inverse-surface-solid-primary-active: #F0F0F0FF;
+  --inverse-surface-solid-secondary-hover: #E8E8E8FF;
+  --inverse-surface-solid-secondary-active: #D9D9D9FF;
+  --inverse-surface-solid-tertiary-hover: #D1D1D1FF;
+  --inverse-surface-solid-tertiary-active: #C2C2C2FF;
+  --inverse-surface-solid-card-hover: #FFFFFFFF;
+  --inverse-surface-solid-card-active: #FFFFFFFF;
+  --inverse-surface-solid-default-hover: #0D0D0DFF;
+  --inverse-surface-solid-default-active: #030303FF;
+  --inverse-surface-transparent-primary-hover: #0808080F;
+  --inverse-surface-transparent-primary-active: #08080800;
+  --inverse-surface-transparent-secondary-hover: #0808081F;
+  --inverse-surface-transparent-secondary-active: #0808080A;
+  --inverse-surface-transparent-tertiary-hover: #0808083D;
+  --inverse-surface-transparent-tertiary-active: #0808080F;
+  --inverse-surface-transparent-deep-hover: #080808C2;
+  --inverse-surface-transparent-deep-active: #08080894;
+  --inverse-surface-transparent-card-hover: #FFFFFFFF;
+  --inverse-surface-transparent-card-active: #FFFFFFFF;
+  --inverse-surface-clear-hover: #FFFFFF00;
+  --inverse-surface-clear-active: #FFFFFF00;
+  --inverse-surface-accent-hover: #05AD7EFF;
+  --inverse-surface-accent-active: #048F68FF;
+  --inverse-surface-accent-minor-hover: #7AF5D2FF;
+  --inverse-surface-accent-minor-active: #4BF1C2FF;
+  --inverse-surface-transparent-accent-hover: #05996F66;
+  --inverse-surface-transparent-accent-active: #05996F38;
+  --inverse-surface-positive-hover: #1DAF37FF;
+  --inverse-surface-positive-active: #18952FFF;
+  --inverse-surface-warning-hover: #FB7223FF;
+  --inverse-surface-warning-active: #F05B05FF;
+  --inverse-surface-negative-hover: #FF475AFF;
+  --inverse-surface-negative-active: #FF1F35FF;
+  --inverse-surface-info-hover: #1798EEFF;
+  --inverse-surface-info-active: #1086D5FF;
+  --inverse-surface-positive-minor-hover: #8AF59DFF;
+  --inverse-surface-positive-minor-active: #6EF286FF;
+  --inverse-surface-warning-minor-hover: #FFDECCFF;
+  --inverse-surface-warning-minor-active: #FFCAADFF;
+  --inverse-surface-negative-minor-hover: #FED7DBFF;
+  --inverse-surface-negative-minor-active: #FEC3C9FF;
+  --inverse-surface-info-minor-hover: #C7E9FFFF;
+  --inverse-surface-info-minor-active: #A8DCFFFF;
+  --inverse-surface-transparent-positive-hover: #1A9E3266;
+  --inverse-surface-transparent-positive-active: #1A9E3238;
+  --inverse-surface-transparent-warning-hover: #FA5F0566;
+  --inverse-surface-transparent-warning-active: #FA5F0538;
+  --inverse-surface-transparent-negative-hover: #FF293E66;
+  --inverse-surface-transparent-negative-active: #FF293E38;
+  --inverse-surface-transparent-info-hover: #118CDF66;
+  --inverse-surface-transparent-info-active: #118CDF38;
+  --inverse-surface-solid-primary: #F5F5F5;
+  --inverse-surface-solid-secondary: #DDDDDD;
+  --inverse-surface-solid-tertiary: #C7C7C7;
+  --inverse-surface-solid-card: #FFFFFFFF;
+  --inverse-surface-solid-default: #080808;
+  --inverse-surface-clear: #FFFFFF00;
+  --inverse-surface-accent: #05996F;
+  --inverse-surface-positive: #1A9E32;
+  --inverse-surface-warning: #FA5F05;
+  --inverse-surface-negative: #FF293E;
+  --inverse-surface-transparent-card: #FFFFFFFF;
+  --inverse-surface-transparent-primary: #08080805;
+  --inverse-surface-transparent-secondary: #0808080F;
+  --inverse-surface-transparent-tertiary: #0808081F;
+  --inverse-surface-transparent-deep: #080808A3;
+  --background-primary: #171717;
+  --dark-background-primary: #171717;
+  --light-background-primary: #F5F5F5;
+  --inverse-background-primary: #F5F5F5;
+  --overlay-soft: #0808088F;
+  --overlay-hard: #080808F5;
+  --overlay-blur: #08080833;
+  --on-dark-overlay-soft: #0808088F;
+  --on-dark-overlay-hard: #080808F5;
+  --on-dark-overlay-blur: #08080833;
+  --on-light-overlay-soft: #F9F9F98F;
+  --on-light-overlay-hard: #F9F9F9F5;
+  --on-light-overlay-blur: #F9F9F933;
+  --inverse-overlay-soft: #F9F9F98F;
+  --inverse-overlay-hard: #F9F9F9F5;
+  --inverse-overlay-blur: #F9F9F933;
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+
+:root {
+  --text-accent-gradient-hover: #CCCCCCFF;
+  --text-accent-gradient-active: #E6E6E6FF;
+  --text-accent-gradient: linear-gradient(45.00deg, #21CA9AFF 0%, #4AD6FCFF 100%);
+  --on-dark-text-accent-gradient-hover: #CCCCCCFF;
+  --on-dark-text-accent-gradient-active: #E6E6E6FF;
+  --on-dark-text-accent-gradient: linear-gradient(45.00deg, #21CA9AFF 0%, #4AD6FCFF 100%);
+  --on-light-text-accent-gradient-hover: #CCCCCCFF;
+  --on-light-text-accent-gradient-active: #E6E6E6FF;
+  --on-light-text-accent-gradient: linear-gradient(45.00deg, #05996FFF 0%, #1BA0E3FF 100%);
+  --inverse-text-accent-gradient-hover: #CCCCCCFF;
+  --inverse-text-accent-gradient-active: #E6E6E6FF;
+  --inverse-text-accent-gradient: linear-gradient(45.00deg, #05996FFF 0%, #1BA0E3FF 100%);
+  --surface-accent-gradient-hover: #FFFFFFFF;
+  --surface-accent-gradient-active: #FFFFFFFF;
+  --surface-accent-gradient: linear-gradient(45.00deg, #00AC7BFF 0.763%, #27C6E5FF 100%);
+  --surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%);
+  --surface-skeleton-gradient-hover: #FFFFFFFF;
+  --surface-skeleton-gradient-active: #FFFFFFFF;
+  --surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%);
+  --surface-skeleton-deep-gradient-hover: #FFFFFFFF;
+  --surface-skeleton-deep-gradient-active: #FFFFFFFF;
+  --on-dark-surface-accent-gradient-hover: #FFFFFFFF;
+  --on-dark-surface-accent-gradient-active: #FFFFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(45.00deg, #00AC7BFF 0.763%, #27C6E5FF 100%);
+  --on-dark-surface-skeleton-gradient: linear-gradient(90deg, #FFFFFF17 0%, #FFFFFF14 6.25%, #FFFFFF0D 12.5%, #FFFFFF03 25%, #FFFFFF0D 37.5%, #FFFFFF14 43.75%, #FFFFFF17 50%, #FFFFFF14 56.25%, #FFFFFF0D 62.5%, #FFFFFF03 75%, #FFFFFF0D 87.5%, #FFFFFF14 93.75%, #FFFFFF17 100%);
+  --on-dark-surface-skeleton-gradient-hover: #FFFFFFFF;
+  --on-dark-surface-skeleton-gradient-active: #FFFFFFFF;
+  --on-dark-surface-skeleton-deep-gradient: linear-gradient(90deg, #FFFFFF5C 0%, #FFFFFF52 6.25%, #FFFFFF33 12.5%, #FFFFFF0A 25%, #FFFFFF33 37.5%, #FFFFFF52 43.75%, #FFFFFF5C 50%, #FFFFFF14 56.25%, #FFFFFF33 62.5%, #FFFFFF0A 75%, #FFFFFF33 87.5%, #FFFFFF52 93.75%, #FFFFFF5C 100%);
+  --on-dark-surface-skeleton-deep-gradient-hover: #FFFFFFFF;
+  --on-dark-surface-skeleton-deep-gradient-active: #FFFFFFFF;
+  --on-light-surface-accent-gradient-hover: #FFFFFFFF;
+  --on-light-surface-accent-gradient-active: #FFFFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(45.00deg, #05996FFF 0%, #1BA0E3FF 100%);
+  --on-light-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%);
+  --on-light-surface-skeleton-gradient-hover: #FFFFFFFF;
+  --on-light-surface-skeleton-gradient-active: #FFFFFFFF;
+  --on-light-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%);
+  --on-light-surface-skeleton-deep-gradient-hover: #FFFFFFFF;
+  --on-light-surface-skeleton-deep-gradient-active: #FFFFFFFF;
+  --inverse-surface-accent-gradient-hover: #FFFFFFFF;
+  --inverse-surface-accent-gradient-active: #FFFFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(45.00deg, #05996FFF 0%, #1BA0E3FF 100%);
+  --inverse-surface-skeleton-gradient: linear-gradient(90deg, #08080817 0%, #08080814 6.25%, #0808080D 12.5%, #08080803 25%, #0808080D 37.5%, #08080814 43.75%, #08080817 50%, #08080814 56.25%, #0808080D 62.5%, #08080803 75%, #0808080D 87.5%, #08080814 93.75%, #08080817 100%);
+  --inverse-surface-skeleton-gradient-hover: #FFFFFFFF;
+  --inverse-surface-skeleton-gradient-active: #FFFFFFFF;
+  --inverse-surface-skeleton-deep-gradient: linear-gradient(90deg, #0808085C 0%, #08080852 6.25%, #08080833 12.5%, #0808080A 25%, #08080833 37.5%, #08080852 43.75%, #0808085C 50%, #08080814 56.25%, #08080833 62.5%, #0808080A 75%, #08080833 87.5%, #08080852 93.75%, #0808085C 100%);
+  --inverse-surface-skeleton-deep-gradient-hover: #FFFFFFFF;
+  --inverse-surface-skeleton-deep-gradient-active: #FFFFFFFF;
+}
+
+:root {
+  --shadow-down-soft-s: 0px 4px 14px -4px #08080814, 0px 1px 4px -1px #0000000A;
+  --shadow-down-soft-m: 0px 24px 48px -8px #00000014;
+  --shadow-down-soft-l: 0px 60px 112px -8px #00000014;
+  --shadow-down-hard-s: 0px 4px 12px -3px #08080829, 0px 1px 4px -2px #00000014;
+  --shadow-down-hard-m: 0px 16px 32px -8px #0000003D;
+  --shadow-down-hard-l: 0px 60px 112px -8px #00000066;
+  --shadow-up-soft-s: 0px -4px 14px -4px #08080814, 0px -1px 4px -1px #00000008;
+  --shadow-up-soft-m: 0px -24px 48px -8px #00000014;
+  --shadow-up-soft-l: 0px -60px 112px -8px #00000014;
+  --shadow-up-hard-s: 0px -4px 12px -3px #08080833, 0px -1px 4px -1px #00000008;
+  --shadow-up-hard-m: 0px -16px 32px -8px #0000003D;
+  --shadow-up-hard-l: 0px -60px 112px -8px #00000066;
+}
+
+:root {
+  --border-radius-xxs: 4px;
+  --border-radius-xs: 8px;
+  --border-radius-s: 12px;
+  --border-radius-m: 16px;
+  --border-radius-l: 20px;
+  --border-radius-xl: 24px;
+  --border-radius-xxl: 32px;
+}
+
+:root {
+  font-size: 16px;
+  --plasma-typo-overflow-wrap: break-word;
+  --plasma-typo-hyphens: auto;
+  --plasma-typo-display-font-family: 'SB Sans Display', sans-serif;
+  --plasma-typo-body-font-family: 'SB Sans Text', sans-serif;
+  --plasma-typo-header-font-family: 'SB Sans Display', sans-serif;
+  --plasma-typo-text-font-family: 'SB Sans Text', sans-serif;
+  --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family);
+  --plasma-typo-dspl-l-letter-spacing: normal;
+  --plasma-typo-dspl-l-font-style: normal;
+  --plasma-typo-dspl-l-bold-font-family: var(--plasma-typo-display-font-family);
+  --plasma-typo-dspl-l-bold-letter-spacing: normal;
+  --plasma-typo-dspl-l-bold-font-style: normal;
+  --plasma-typo-dspl-m-font-family: var(--plasma-typo-display-font-family);
+  --plasma-typo-dspl-m-letter-spacing: normal;
+  --plasma-typo-dspl-m-font-style: normal;
+  --plasma-typo-dspl-m-bold-font-family: var(--plasma-typo-display-font-family);
+  --plasma-typo-dspl-m-bold-letter-spacing: normal;
+  --plasma-typo-dspl-m-bold-font-style: normal;
+  --plasma-typo-dspl-s-font-family: var(--plasma-typo-display-font-family);
+  --plasma-typo-dspl-s-letter-spacing: normal;
+  --plasma-typo-dspl-s-font-style: normal;
+  --plasma-typo-dspl-s-bold-font-family: var(--plasma-typo-display-font-family);
+  --plasma-typo-dspl-s-bold-letter-spacing: normal;
+  --plasma-typo-dspl-s-bold-font-style: normal;
+  --plasma-typo-h1-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h1-letter-spacing: normal;
+  --plasma-typo-h1-font-style: normal;
+  --plasma-typo-h1-bold-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h1-bold-letter-spacing: normal;
+  --plasma-typo-h1-bold-font-style: normal;
+  --plasma-typo-h2-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h2-letter-spacing: normal;
+  --plasma-typo-h2-font-style: normal;
+  --plasma-typo-h2-bold-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h2-bold-letter-spacing: normal;
+  --plasma-typo-h2-bold-font-style: normal;
+  --plasma-typo-h3-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h3-letter-spacing: normal;
+  --plasma-typo-h3-font-style: normal;
+  --plasma-typo-h3-bold-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h3-bold-letter-spacing: normal;
+  --plasma-typo-h3-bold-font-style: normal;
+  --plasma-typo-h4-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h4-letter-spacing: normal;
+  --plasma-typo-h4-font-style: normal;
+  --plasma-typo-h4-bold-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h4-bold-letter-spacing: normal;
+  --plasma-typo-h4-bold-font-style: normal;
+  --plasma-typo-h5-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h5-letter-spacing: normal;
+  --plasma-typo-h5-font-style: normal;
+  --plasma-typo-h5-bold-font-family: var(--plasma-typo-header-font-family);
+  --plasma-typo-h5-bold-letter-spacing: normal;
+  --plasma-typo-h5-bold-font-style: normal;
+  --plasma-typo-body-l-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-l-letter-spacing: -0.02em;
+  --plasma-typo-body-l-font-style: normal;
+  --plasma-typo-body-l-bold-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-l-bold-letter-spacing: -0.02em;
+  --plasma-typo-body-l-bold-font-style: normal;
+  --plasma-typo-body-m-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-m-letter-spacing: -0.02em;
+  --plasma-typo-body-m-font-style: normal;
+  --plasma-typo-body-m-bold-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-m-bold-letter-spacing: -0.02em;
+  --plasma-typo-body-m-bold-font-style: normal;
+  --plasma-typo-body-s-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-s-letter-spacing: -0.02em;
+  --plasma-typo-body-s-font-style: normal;
+  --plasma-typo-body-s-bold-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-s-bold-letter-spacing: -0.02em;
+  --plasma-typo-body-s-bold-font-style: normal;
+  --plasma-typo-body-xs-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-xs-letter-spacing: -0.02em;
+  --plasma-typo-body-xs-font-style: normal;
+  --plasma-typo-body-xs-bold-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-xs-bold-letter-spacing: -0.02em;
+  --plasma-typo-body-xs-bold-font-style: normal;
+  --plasma-typo-body-xxs-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-xxs-letter-spacing: -0.02em;
+  --plasma-typo-body-xxs-font-style: normal;
+  --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-body-font-family);
+  --plasma-typo-body-xxs-bold-letter-spacing: -0.02em;
+  --plasma-typo-body-xxs-bold-font-style: normal;
+  --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-l-letter-spacing: -0.02em;
+  --plasma-typo-text-l-font-style: normal;
+  --plasma-typo-text-l-bold-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-l-bold-letter-spacing: -0.02em;
+  --plasma-typo-text-l-bold-font-style: normal;
+  --plasma-typo-text-m-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-m-letter-spacing: -0.02em;
+  --plasma-typo-text-m-font-style: normal;
+  --plasma-typo-text-m-bold-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-m-bold-letter-spacing: -0.02em;
+  --plasma-typo-text-m-bold-font-style: normal;
+  --plasma-typo-text-s-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-s-letter-spacing: -0.02em;
+  --plasma-typo-text-s-font-style: normal;
+  --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-s-bold-letter-spacing: -0.02em;
+  --plasma-typo-text-s-bold-font-style: normal;
+  --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-xs-letter-spacing: -0.02em;
+  --plasma-typo-text-xs-font-style: normal;
+  --plasma-typo-text-xs-bold-font-family: var(--plasma-typo-text-font-family);
+  --plasma-typo-text-xs-bold-letter-spacing: -0.02em;
+  --plasma-typo-text-xs-bold-font-style: normal;
+}
+
+@media (max-width: 559px) {
+  :root {
+    --plasma-typo-dspl-l-font-size: 5.5rem;
+    --plasma-typo-dspl-l-font-weight: 300;
+    --plasma-typo-dspl-l-line-height: 5.75rem;
+    --plasma-typo-dspl-l-bold-font-size: 5.5rem;
+    --plasma-typo-dspl-l-bold-font-weight: 600;
+    --plasma-typo-dspl-l-bold-line-height: 5.75rem;
+    --plasma-typo-dspl-m-font-size: 3.5rem;
+    --plasma-typo-dspl-m-font-weight: 300;
+    --plasma-typo-dspl-m-line-height: 3.875rem;
+    --plasma-typo-dspl-m-bold-font-size: 3.5rem;
+    --plasma-typo-dspl-m-bold-font-weight: 600;
+    --plasma-typo-dspl-m-bold-line-height: 3.875rem;
+    --plasma-typo-dspl-s-font-size: 2.5rem;
+    --plasma-typo-dspl-s-font-weight: 300;
+    --plasma-typo-dspl-s-line-height: 2.875rem;
+    --plasma-typo-dspl-s-bold-font-size: 2.5rem;
+    --plasma-typo-dspl-s-bold-font-weight: 600;
+    --plasma-typo-dspl-s-bold-line-height: 2.875rem;
+    --plasma-typo-h1-font-size: 1.75rem;
+    --plasma-typo-h1-font-weight: 400;
+    --plasma-typo-h1-line-height: 2.125rem;
+    --plasma-typo-h1-bold-font-size: 1.75rem;
+    --plasma-typo-h1-bold-font-weight: 600;
+    --plasma-typo-h1-bold-line-height: 2.125rem;
+    --plasma-typo-h2-font-size: 1.5rem;
+    --plasma-typo-h2-font-weight: 400;
+    --plasma-typo-h2-line-height: 1.875rem;
+    --plasma-typo-h2-bold-font-size: 1.5rem;
+    --plasma-typo-h2-bold-font-weight: 600;
+    --plasma-typo-h2-bold-line-height: 1.875rem;
+    --plasma-typo-h3-font-size: 1.25rem;
+    --plasma-typo-h3-font-weight: 400;
+    --plasma-typo-h3-line-height: 1.625rem;
+    --plasma-typo-h3-bold-font-size: 1.25rem;
+    --plasma-typo-h3-bold-font-weight: 600;
+    --plasma-typo-h3-bold-line-height: 1.625rem;
+    --plasma-typo-h4-font-size: 1.125rem;
+    --plasma-typo-h4-font-weight: 400;
+    --plasma-typo-h4-line-height: 1.5rem;
+    --plasma-typo-h4-bold-font-size: 1.125rem;
+    --plasma-typo-h4-bold-font-weight: 600;
+    --plasma-typo-h4-bold-line-height: 1.5rem;
+    --plasma-typo-h5-font-size: 1rem;
+    --plasma-typo-h5-font-weight: 400;
+    --plasma-typo-h5-line-height: 1.375rem;
+    --plasma-typo-h5-bold-font-size: 1rem;
+    --plasma-typo-h5-bold-font-weight: 600;
+    --plasma-typo-h5-bold-line-height: 1.375rem;
+    --plasma-typo-body-l-font-size: 1.125rem;
+    --plasma-typo-body-l-font-weight: 400;
+    --plasma-typo-body-l-line-height: 1.375rem;
+    --plasma-typo-body-l-bold-font-size: 1.125rem;
+    --plasma-typo-body-l-bold-font-weight: 600;
+    --plasma-typo-body-l-bold-line-height: 1.375rem;
+    --plasma-typo-body-m-font-size: 1rem;
+    --plasma-typo-body-m-font-weight: 400;
+    --plasma-typo-body-m-line-height: 1.25rem;
+    --plasma-typo-body-m-bold-font-size: 1rem;
+    --plasma-typo-body-m-bold-font-weight: 600;
+    --plasma-typo-body-m-bold-line-height: 1.25rem;
+    --plasma-typo-body-s-font-size: 0.875rem;
+    --plasma-typo-body-s-font-weight: 400;
+    --plasma-typo-body-s-line-height: 1.125rem;
+    --plasma-typo-body-s-bold-font-size: 0.875rem;
+    --plasma-typo-body-s-bold-font-weight: 600;
+    --plasma-typo-body-s-bold-line-height: 1.125rem;
+    --plasma-typo-body-xs-font-size: 0.75rem;
+    --plasma-typo-body-xs-font-weight: 400;
+    --plasma-typo-body-xs-line-height: 0.875rem;
+    --plasma-typo-body-xs-bold-font-size: 0.75rem;
+    --plasma-typo-body-xs-bold-font-weight: 600;
+    --plasma-typo-body-xs-bold-line-height: 0.875rem;
+    --plasma-typo-body-xxs-font-size: 0.625rem;
+    --plasma-typo-body-xxs-font-weight: 400;
+    --plasma-typo-body-xxs-line-height: 0.75rem;
+    --plasma-typo-body-xxs-bold-font-size: 0.625rem;
+    --plasma-typo-body-xxs-bold-font-weight: 600;
+    --plasma-typo-body-xxs-bold-line-height: 0.75rem;
+    --plasma-typo-text-l-font-size: 1.125rem;
+    --plasma-typo-text-l-font-weight: 400;
+    --plasma-typo-text-l-line-height: 1.625rem;
+    --plasma-typo-text-l-bold-font-size: 1.125rem;
+    --plasma-typo-text-l-bold-font-weight: 600;
+    --plasma-typo-text-l-bold-line-height: 1.625rem;
+    --plasma-typo-text-m-font-size: 1rem;
+    --plasma-typo-text-m-font-weight: 400;
+    --plasma-typo-text-m-line-height: 1.5rem;
+    --plasma-typo-text-m-bold-font-size: 1rem;
+    --plasma-typo-text-m-bold-font-weight: 600;
+    --plasma-typo-text-m-bold-line-height: 1.5rem;
+    --plasma-typo-text-s-font-size: 0.875rem;
+    --plasma-typo-text-s-font-weight: 400;
+    --plasma-typo-text-s-line-height: 1.25rem;
+    --plasma-typo-text-s-bold-font-size: 0.875rem;
+    --plasma-typo-text-s-bold-font-weight: 600;
+    --plasma-typo-text-s-bold-line-height: 1.25rem;
+    --plasma-typo-text-xs-font-size: 0.75rem;
+    --plasma-typo-text-xs-font-weight: 400;
+    --plasma-typo-text-xs-line-height: 1rem;
+    --plasma-typo-text-xs-bold-font-size: 0.75rem;
+    --plasma-typo-text-xs-bold-font-weight: 600;
+    --plasma-typo-text-xs-bold-line-height: 1rem;
+  }
+}
+
+@media (min-width: 560px) and (max-width: 959px) {
+  :root {
+    --plasma-typo-dspl-l-font-size: 7rem;
+    --plasma-typo-dspl-l-font-weight: 300;
+    --plasma-typo-dspl-l-line-height: 7rem;
+    --plasma-typo-dspl-l-bold-font-size: 7rem;
+    --plasma-typo-dspl-l-bold-font-weight: 600;
+    --plasma-typo-dspl-l-bold-line-height: 7rem;
+    --plasma-typo-dspl-m-font-size: 4.5rem;
+    --plasma-typo-dspl-m-font-weight: 300;
+    --plasma-typo-dspl-m-line-height: 4.75rem;
+    --plasma-typo-dspl-m-bold-font-size: 4.5rem;
+    --plasma-typo-dspl-m-bold-font-weight: 600;
+    --plasma-typo-dspl-m-bold-line-height: 4.75rem;
+    --plasma-typo-dspl-s-font-size: 3rem;
+    --plasma-typo-dspl-s-font-weight: 300;
+    --plasma-typo-dspl-s-line-height: 3.375rem;
+    --plasma-typo-dspl-s-bold-font-size: 3rem;
+    --plasma-typo-dspl-s-bold-font-weight: 600;
+    --plasma-typo-dspl-s-bold-line-height: 3.375rem;
+    --plasma-typo-h1-font-size: 2.5rem;
+    --plasma-typo-h1-font-weight: 400;
+    --plasma-typo-h1-line-height: 2.875rem;
+    --plasma-typo-h1-bold-font-size: 2.5rem;
+    --plasma-typo-h1-bold-font-weight: 600;
+    --plasma-typo-h1-bold-line-height: 2.875rem;
+    --plasma-typo-h2-font-size: 1.75rem;
+    --plasma-typo-h2-font-weight: 400;
+    --plasma-typo-h2-line-height: 2.125rem;
+    --plasma-typo-h2-bold-font-size: 1.75rem;
+    --plasma-typo-h2-bold-font-weight: 600;
+    --plasma-typo-h2-bold-line-height: 2.125rem;
+    --plasma-typo-h3-font-size: 1.25rem;
+    --plasma-typo-h3-font-weight: 400;
+    --plasma-typo-h3-line-height: 1.625rem;
+    --plasma-typo-h3-bold-font-size: 1.25rem;
+    --plasma-typo-h3-bold-font-weight: 600;
+    --plasma-typo-h3-bold-line-height: 1.625rem;
+    --plasma-typo-h4-font-size: 1.125rem;
+    --plasma-typo-h4-font-weight: 400;
+    --plasma-typo-h4-line-height: 1.5rem;
+    --plasma-typo-h4-bold-font-size: 1.125rem;
+    --plasma-typo-h4-bold-font-weight: 600;
+    --plasma-typo-h4-bold-line-height: 1.5rem;
+    --plasma-typo-h5-font-size: 1rem;
+    --plasma-typo-h5-font-weight: 400;
+    --plasma-typo-h5-line-height: 1.375rem;
+    --plasma-typo-h5-bold-font-size: 1rem;
+    --plasma-typo-h5-bold-font-weight: 600;
+    --plasma-typo-h5-bold-line-height: 1.375rem;
+    --plasma-typo-body-l-font-size: 1.125rem;
+    --plasma-typo-body-l-font-weight: 400;
+    --plasma-typo-body-l-line-height: 1.375rem;
+    --plasma-typo-body-l-bold-font-size: 1.125rem;
+    --plasma-typo-body-l-bold-font-weight: 600;
+    --plasma-typo-body-l-bold-line-height: 1.375rem;
+    --plasma-typo-body-m-font-size: 1rem;
+    --plasma-typo-body-m-font-weight: 400;
+    --plasma-typo-body-m-line-height: 1.25rem;
+    --plasma-typo-body-m-bold-font-size: 1rem;
+    --plasma-typo-body-m-bold-font-weight: 600;
+    --plasma-typo-body-m-bold-line-height: 1.25rem;
+    --plasma-typo-body-s-font-size: 0.875rem;
+    --plasma-typo-body-s-font-weight: 400;
+    --plasma-typo-body-s-line-height: 1.125rem;
+    --plasma-typo-body-s-bold-font-size: 0.875rem;
+    --plasma-typo-body-s-bold-font-weight: 600;
+    --plasma-typo-body-s-bold-line-height: 1.125rem;
+    --plasma-typo-body-xs-font-size: 0.75rem;
+    --plasma-typo-body-xs-font-weight: 400;
+    --plasma-typo-body-xs-line-height: 0.875rem;
+    --plasma-typo-body-xs-bold-font-size: 0.75rem;
+    --plasma-typo-body-xs-bold-font-weight: 600;
+    --plasma-typo-body-xs-bold-line-height: 0.875rem;
+    --plasma-typo-body-xxs-font-size: 0.625rem;
+    --plasma-typo-body-xxs-font-weight: 400;
+    --plasma-typo-body-xxs-line-height: 0.75rem;
+    --plasma-typo-body-xxs-bold-font-size: 0.625rem;
+    --plasma-typo-body-xxs-bold-font-weight: 600;
+    --plasma-typo-body-xxs-bold-line-height: 0.75rem;
+    --plasma-typo-text-l-font-size: 1.25rem;
+    --plasma-typo-text-l-font-weight: 400;
+    --plasma-typo-text-l-line-height: 1.75rem;
+    --plasma-typo-text-l-bold-font-size: 1.25rem;
+    --plasma-typo-text-l-bold-font-weight: 600;
+    --plasma-typo-text-l-bold-line-height: 1.75rem;
+    --plasma-typo-text-m-font-size: 1rem;
+    --plasma-typo-text-m-font-weight: 400;
+    --plasma-typo-text-m-line-height: 1.5rem;
+    --plasma-typo-text-m-bold-font-size: 1rem;
+    --plasma-typo-text-m-bold-font-weight: 600;
+    --plasma-typo-text-m-bold-line-height: 1.5rem;
+    --plasma-typo-text-s-font-size: 0.875rem;
+    --plasma-typo-text-s-font-weight: 400;
+    --plasma-typo-text-s-line-height: 1.25rem;
+    --plasma-typo-text-s-bold-font-size: 0.875rem;
+    --plasma-typo-text-s-bold-font-weight: 600;
+    --plasma-typo-text-s-bold-line-height: 1.25rem;
+    --plasma-typo-text-xs-font-size: 0.75rem;
+    --plasma-typo-text-xs-font-weight: 400;
+    --plasma-typo-text-xs-line-height: 1rem;
+    --plasma-typo-text-xs-bold-font-size: 0.75rem;
+    --plasma-typo-text-xs-bold-font-weight: 600;
+    --plasma-typo-text-xs-bold-line-height: 1rem;
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --plasma-typo-dspl-l-font-size: 8rem;
+    --plasma-typo-dspl-l-font-weight: 300;
+    --plasma-typo-dspl-l-line-height: 8rem;
+    --plasma-typo-dspl-l-bold-font-size: 8rem;
+    --plasma-typo-dspl-l-bold-font-weight: 600;
+    --plasma-typo-dspl-l-bold-line-height: 8rem;
+    --plasma-typo-dspl-m-font-size: 5.5rem;
+    --plasma-typo-dspl-m-font-weight: 300;
+    --plasma-typo-dspl-m-line-height: 5.75rem;
+    --plasma-typo-dspl-m-bold-font-size: 5.5rem;
+    --plasma-typo-dspl-m-bold-font-weight: 600;
+    --plasma-typo-dspl-m-bold-line-height: 5.75rem;
+    --plasma-typo-dspl-s-font-size: 4rem;
+    --plasma-typo-dspl-s-font-weight: 300;
+    --plasma-typo-dspl-s-line-height: 4.25rem;
+    --plasma-typo-dspl-s-bold-font-size: 4rem;
+    --plasma-typo-dspl-s-bold-font-weight: 600;
+    --plasma-typo-dspl-s-bold-line-height: 4.25rem;
+    --plasma-typo-h1-font-size: 3rem;
+    --plasma-typo-h1-font-weight: 400;
+    --plasma-typo-h1-line-height: 3.375rem;
+    --plasma-typo-h1-bold-font-size: 3rem;
+    --plasma-typo-h1-bold-font-weight: 600;
+    --plasma-typo-h1-bold-line-height: 3.375rem;
+    --plasma-typo-h2-font-size: 2rem;
+    --plasma-typo-h2-font-weight: 400;
+    --plasma-typo-h2-line-height: 2.375rem;
+    --plasma-typo-h2-bold-font-size: 2rem;
+    --plasma-typo-h2-bold-font-weight: 600;
+    --plasma-typo-h2-bold-line-height: 2.375rem;
+    --plasma-typo-h3-font-size: 1.5rem;
+    --plasma-typo-h3-font-weight: 400;
+    --plasma-typo-h3-line-height: 1.875rem;
+    --plasma-typo-h3-bold-font-size: 1.5rem;
+    --plasma-typo-h3-bold-font-weight: 600;
+    --plasma-typo-h3-bold-line-height: 1.875rem;
+    --plasma-typo-h4-font-size: 1.25rem;
+    --plasma-typo-h4-font-weight: 400;
+    --plasma-typo-h4-line-height: 1.625rem;
+    --plasma-typo-h4-bold-font-size: 1.25rem;
+    --plasma-typo-h4-bold-font-weight: 600;
+    --plasma-typo-h4-bold-line-height: 1.625rem;
+    --plasma-typo-h5-font-size: 1.125rem;
+    --plasma-typo-h5-font-weight: 400;
+    --plasma-typo-h5-line-height: 1.5rem;
+    --plasma-typo-h5-bold-font-size: 1.125rem;
+    --plasma-typo-h5-bold-font-weight: 600;
+    --plasma-typo-h5-bold-line-height: 1.5rem;
+    --plasma-typo-body-l-font-size: 1.125rem;
+    --plasma-typo-body-l-font-weight: 400;
+    --plasma-typo-body-l-line-height: 1.375rem;
+    --plasma-typo-body-l-bold-font-size: 1.125rem;
+    --plasma-typo-body-l-bold-font-weight: 600;
+    --plasma-typo-body-l-bold-line-height: 1.375rem;
+    --plasma-typo-body-m-font-size: 1rem;
+    --plasma-typo-body-m-font-weight: 400;
+    --plasma-typo-body-m-line-height: 1.25rem;
+    --plasma-typo-body-m-bold-font-size: 1rem;
+    --plasma-typo-body-m-bold-font-weight: 600;
+    --plasma-typo-body-m-bold-line-height: 1.25rem;
+    --plasma-typo-body-s-font-size: 0.875rem;
+    --plasma-typo-body-s-font-weight: 400;
+    --plasma-typo-body-s-line-height: 1.125rem;
+    --plasma-typo-body-s-bold-font-size: 0.875rem;
+    --plasma-typo-body-s-bold-font-weight: 600;
+    --plasma-typo-body-s-bold-line-height: 1.125rem;
+    --plasma-typo-body-xs-font-size: 0.75rem;
+    --plasma-typo-body-xs-font-weight: 400;
+    --plasma-typo-body-xs-line-height: 0.875rem;
+    --plasma-typo-body-xs-bold-font-size: 0.75rem;
+    --plasma-typo-body-xs-bold-font-weight: 600;
+    --plasma-typo-body-xs-bold-line-height: 0.875rem;
+    --plasma-typo-body-xxs-font-size: 0.625rem;
+    --plasma-typo-body-xxs-font-weight: 400;
+    --plasma-typo-body-xxs-line-height: 0.75rem;
+    --plasma-typo-body-xxs-bold-font-size: 0.625rem;
+    --plasma-typo-body-xxs-bold-font-weight: 600;
+    --plasma-typo-body-xxs-bold-line-height: 0.75rem;
+    --plasma-typo-text-l-font-size: 1.5rem;
+    --plasma-typo-text-l-font-weight: 400;
+    --plasma-typo-text-l-line-height: 2rem;
+    --plasma-typo-text-l-bold-font-size: 1.5rem;
+    --plasma-typo-text-l-bold-font-weight: 600;
+    --plasma-typo-text-l-bold-line-height: 2rem;
+    --plasma-typo-text-m-font-size: 1.125rem;
+    --plasma-typo-text-m-font-weight: 400;
+    --plasma-typo-text-m-line-height: 1.625rem;
+    --plasma-typo-text-m-bold-font-size: 1.125rem;
+    --plasma-typo-text-m-bold-font-weight: 600;
+    --plasma-typo-text-m-bold-line-height: 1.625rem;
+    --plasma-typo-text-s-font-size: 0.875rem;
+    --plasma-typo-text-s-font-weight: 400;
+    --plasma-typo-text-s-line-height: 1.25rem;
+    --plasma-typo-text-s-bold-font-size: 0.875rem;
+    --plasma-typo-text-s-bold-font-weight: 600;
+    --plasma-typo-text-s-bold-line-height: 1.25rem;
+    --plasma-typo-text-xs-font-size: 0.75rem;
+    --plasma-typo-text-xs-font-weight: 400;
+    --plasma-typo-text-xs-line-height: 1rem;
+    --plasma-typo-text-xs-bold-font-size: 0.75rem;
+    --plasma-typo-text-xs-bold-font-weight: 600;
+    --plasma-typo-text-xs-bold-line-height: 1rem;
+  }
+}