:root {
  --text-body: var(--color-white-1000);
  --text-muted: var(--color-grey-400);
  --text-muted-ondark: var(--color-dark-600);
  --text-on-dark: var(--color-dark-1000);
  --text-placeholder: var(--color-white-300);
  --text-placeholder-ondark: var(--color-dark-300);
  --text-disabled-ondark: var(--color-dark-200);
  --text-disabled: var(--color-white-200);
  --text-accent: var(--color-teal-1000);
  --surface-page: var(--color-dark-1000);
  --surface-card: var(--color-white-100);
  --surface-card-secondary: var(--color-grey-100);
  --surface-overlay: var(--color-dark-500);
  --surface-bottom-bar: var(--color-white-100);
  --surface-header-bar-glass: var(--color-white-100);
  --surface-header-solid: var(--color-white-100);
  --surface-input: var(--color-white-100);
  --surface-accent: var(--color-teal-1000);
  --surface-item: var(--color-white-100);
  --surface-offcanvas: var(--color-dark-1000);
  --surface-disabled: var(--color-white-100);
  --surface-icon: var(--color-white-1000);
  --stroke-default: var(--color-white-1000);
  --stroke-on-dark: var(--color-dark-1000);
  --stroke-accent: var(--color-teal-1000);
  --stroke-grey: var(--color-grey-100);
  --status-danger-emphasis: var(--color-red-100);
  --status-danger-subtle: var(--color-red-50);
  --status-success-emphasis: var(--color-green-100);
  --status-success-subtle: var(--color-green-50);
  --status-warning-emphasis: var(--color-orange-100);
  --status-warning-subtle: var(--color-orange-50);
  --status-info-emphasis: var(--color-teal-1000);
  --status-info-subtle: var(--color-teal-200);
  --control-light-fill: var(--color-yellow-50);
  --control-light-track: var(--color-yellow-100);
  --control-cold-fill: var(--color-cyano-50);
  --control-cold-track: var(--color-cyano-100);
  --control-hot-fill: var(--color-orange-50);
  --control-hot-track: var(--color-orange-100);
  --control-auto-fill: var(--color-green-50);
  --control-auto-track: var(--color-green-100);
  --control-fan-fill: var(--color-teal-200);
  --control-fan-track: var(--color-teal-1000);
  --control-handle: var(--color-white-1000);
  --control-off: var(--color-white-200);
  --control-off-fill: var(--color-white-100);
  --button-primary-bg: var(--color-white-1000);
  --button-primary-bg-hover: var(--color-white-900);
  --button-primary-bg-active: var(--color-teal-1000);
  --button-primary-label: var(--color-dark-1000);
  --button-primary-label-active: var(--color-white-1000);
  --button-primary-label-disabled: var(--color-white-200);
  --button-secondary-bg: var(--color-teal-1000);
  --button-secondary-bg-hover: var(--color-teal-800);
  --button-secondary-bg-disabled: var(--color-white-100);
  --button-secondary-label: var(--color-white-1000);
  --button-secondary-label-disabled: var(--color-white-200);
  --button-link-label: var(--color-white-1000);
  --button-link-label-hover: var(--color-grey-400);
  --button-link-label-disabled: var(--color-white-200);
  --button-base-bg: var(--color-teal-200);
  --button-base-bg-active: var(--color-teal-1000);
  --button-base-bg-pressed: var(--color-teal-400);
  --button-base-bg-disabled: var(--color-white-100);
  --button-base-icon: var(--color-teal-1000);
  --button-base-icon-active: var(--color-white-1000);
  --button-base-icon-disabled: var(--color-white-200);
  --badge-role-armatore-bg: var(--color-teal-200);
  --badge-role-armatore-text: var(--color-teal-1000);
  --badge-role-capitano-bg: var(--color-cyano-50);
  --badge-role-capitano-text: var(--color-cyano-100);
  --badge-role-ospite-bg: var(--color-white-200);
  --badge-role-ospite-text: var(--color-white-500);
  --badge-role-familiare-bg: var(--color-purple-200);
  --badge-role-familiare-text: var(--color-purple-1000);
  --badge-badge-dot-bg: var(--color-white-100);
  --badge-badge-primary: var(--color-white-1000);
  --badge-badge-secondary: var(--color-grey-400);
  --toggle-surface: var(--color-white-100);
  --toggle-surface-active: var(--color-teal-200);
  --toggle-nob: var(--color-white-100);
  --toggle-nob-active: var(--color-teal-1000);
  --tab-default: var(--color-white-300);
  --tab-active: var(--color-teal-1000);
  --tab-inactive: var(--color-teal-300);
  --tab-label-dafault: var(--color-white-300);
  --tab-label-active: var(--color-white-1000);
  --tag-tag: var(--color-grey-100);
  --tag-tag-active: var(--color-dark-1000);
  --spacing-0: 0px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 32px;
  --spacing-8: 40px;
  --spacing-9: 48px;
  --spacing-10: 64px;
  --spacing-page-horizontal: var(--spacing-4);
  --spacing-page-top: var(--spacing-10);
  --spacing-page-section-gap: var(--spacing-5);
  --spacing-page-section-gap-lg: var(--spacing-8);
  --spacing-card-padding: var(--spacing-4);
  --spacing-card-padding-lg: var(--spacing-6);
  --spacing-card-padding-inner: var(--spacing-3);
  --spacing-card-padding-inner-lg: var(--spacing-4);
  --spacing-card-gap: var(--spacing-2);
  --spacing-card-gap-lg: var(--spacing-5);
  --spacing-card-grid-gap: var(--spacing-2);
  --spacing-list-item-padding: var(--spacing-3);
  --spacing-list-item-gap: var(--spacing-3);
  --spacing-list-item-gap-small: var(--spacing-1);
  --spacing-list-item-grid-gap: var(--spacing-2);
  --spacing-button-form-padding: var(--spacing-4);
  --spacing-button-form-padding-h: var(--spacing-1);
  --spacing-button-form-padding-sm: var(--spacing-3);
  --spacing-button-form-label-gap: var(--spacing-1);
  --spacing-button-form-field-gap: var(--spacing-5);
  --spacing-button-form-icon-gap: var(--spacing-2);
  --spacing-button-form-form-gap: var(--spacing-8);
  --spacing-button-form-grid-gap: var(--spacing-2);
  --spacing-navigation-padding: var(--spacing-3);
  --spacing-navigation-header-bar-gap: var(--spacing-2);
  --spacing-navigation-bottom-bar-icongap: var(--spacing-6);
  --spacing-badge-padding: var(--spacing-2);
  --spacing-badge-padding-m: var(--spacing-3);
  --spacing-badge-padding-lg: var(--spacing-4);
  --spacing-badge-icon-gap: var(--spacing-1);
  --spacing-offcanvas-padding-lg: var(--spacing-6);
  --spacing-offcanvas-padding: var(--spacing-3);
  --spacing-offcanvas-icon-gap: var(--spacing-2);
  --spacing-toggle-padding: var(--spacing-1);
  --spacing-toggle-gap: var(--spacing-1);
  --spacing-tab-padding: var(--spacing-4);
  --spacing-tab-padding-sm: var(--spacing-3);
  --spacing-tab-icon-gap: var(--spacing-1);
  --spacing-tab-grid-gap: var(--spacing-1);
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 16px;
  --radius-5: 24px;
  --radius-button: var(--radius-2);
  --radius-button-base: var(--radius-2);
  --radius-badge: var(--radius-2);
  --radius-list-item: var(--radius-2);
  --radius-card: var(--radius-2);
  --radius-input: var(--radius-2);
  --radius-bottom-bar: var(--radius-4);
  --radius-header-bar: var(--radius-2);
  --radius-image: var(--radius-2);
  --radius-offcanvas: var(--radius-4);
  --radius-card-inner: var(--radius-2);
  --radius-tab: var(--radius-2);
  --radius-tab-vertical: var(--radius-2);
  --radius-dimmer: var(--radius-3);
  --radius-full: 4px;
  --color-teal-100: rgba(255, 3, 53, 0.1);
  --color-teal-200: rgba(255, 3, 53, 0.2);
  --color-teal-300: rgba(255, 3, 53, 0.3);
  --color-teal-400: rgba(255, 3, 53, 0.4);
  --color-teal-500: rgba(255, 3, 53, 0.5);
  --color-teal-600: rgba(255, 3, 53, 0.6);
  --color-teal-700: rgba(255, 3, 53, 0.7);
  --color-teal-800: rgba(255, 3, 53, 0.8);
  --color-teal-900: rgba(255, 3, 53, 0.9);
  --color-teal-1000: #ff0335;
  --color-white-100: rgba(255, 255, 255, 0.1);
  --color-white-200: rgba(255, 255, 255, 0.2);
  --color-white-300: rgba(255, 255, 255, 0.3);
  --color-white-400: rgba(255, 255, 255, 0.4);
  --color-white-500: rgba(255, 255, 255, 0.5);
  --color-white-600: rgba(255, 255, 255, 0.6);
  --color-white-700: rgba(255, 255, 255, 0.7);
  --color-white-800: rgba(255, 255, 255, 0.8);
  --color-white-900: rgba(255, 255, 255, 0.9);
  --color-white-1000: #ffffff;
  --color-dark-50: rgba(0, 0, 0, 0.05);
  --color-dark-150: rgba(0, 0, 0, 0.15);
  --color-dark-200: rgba(0, 0, 0, 0.2);
  --color-dark-300: rgba(0, 0, 0, 0.3);
  --color-dark-400: rgba(0, 0, 0, 0.4);
  --color-dark-500: rgba(0, 0, 0, 0.5);
  --color-dark-600: rgba(0, 0, 0, 0.6);
  --color-dark-700: rgba(0, 0, 0, 0.7);
  --color-dark-800: rgba(0, 0, 0, 0.8);
  --color-dark-900: rgba(0, 0, 0, 0.9);
  --color-dark-1000: #000000;
  --color-grey-100: #2b2b2b;
  --color-grey-400: #c0c0c0;
  --color-red-50: #382527;
  --color-red-100: #d44949;
  --color-green-50: #1d4032;
  --color-green-100: #49d484;
  --color-yellow-50: #fff3b6;
  --color-yellow-100: #ffd60a;
  --color-orange-50: #3e3021;
  --color-orange-100: #ef812d;
  --color-cyano-50: #263f48;
  --color-cyano-100: #76cbf0;
  --color-purple-200: rgba(211, 154, 205, 0.2);
  --color-purple-1000: #d39acd;
}

.body-regular {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.42px;
}

.body-bold {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.42px;
}

.body-light {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.42px;
}

.body-italic {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.42px;
}

.body-underline {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.42px;
}

.body-strike {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.42px;
}

.body-small {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: -0.36px;
}

.body-code {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0px;
}

.body-lead {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.48px;
  text-transform: uppercase;
}

.body-blockquote {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing: -0.6px;
}

h1 {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

h2 {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 24px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

h3 {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

h4 {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

h5 {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

h6 {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0px;
  text-transform: uppercase;
}

.components-offcanvas-title {
  font-family: 'Soehne Breit', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0px;
  text-transform: uppercase;
}