:root {
  --text-body: var(--color-dark-1000);
  --text-muted: var(--color-grey-400);
  --text-muted-ondark: var(--color-white-600);
  --text-on-dark: var(--color-white-1000);
  --text-placeholder: var(--color-white-300);
  --text-placeholder-ondark: var(--color-dark-300);
  --text-disabled-ondark: var(--color-white-200);
  --text-disabled: var(--color-dark-200);
  --text-accent: var(--color-teal-1000);
  --surface-page: var(--color-grey-100);
  --surface-card: var(--color-white-1000);
  --surface-card-secondary: var(--color-grey-100);
  --surface-overlay: var(--color-dark-300);
  --surface-bottom-bar: var(--color-dark-50);
  --surface-header-bar-glass: var(--color-white-800);
  --surface-header-solid: var(--color-white-1000);
  --surface-input: var(--color-white-100);
  --surface-accent: var(--color-teal-1000);
  --surface-item: var(--color-white-1000);
  --surface-offcanvas: var(--color-white-1000);
  --surface-disabled: var(--color-dark-200);
  --surface-icon: var(--color-dark-1000);
  --stroke-default: var(--color-dark-1000);
  --stroke-on-dark: var(--color-white-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-100);
  --control-fan-track: var(--color-teal-1000);
  --control-handle: var(--color-white-1000);
  --control-off: var(--color-dark-200);
  --control-off-fill: var(--color-grey-100);
  --button-primary-bg: var(--color-white-1000);
  --button-primary-bg-hover: var(--color-grey-100);
  --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-dark-200);
  --button-secondary-bg: var(--color-teal-1000);
  --button-secondary-bg-hover: var(--color-teal-800);
  --button-secondary-bg-disabled: var(--color-dark-150);
  --button-secondary-label: var(--color-white-1000);
  --button-secondary-label-disabled: var(--color-dark-200);
  --button-link-label: var(--color-white-1000);
  --button-link-label-hover: var(--color-grey-400);
  --button-link-label-disabled: var(--color-white-600);
  --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-grey-100);
  --button-base-icon: var(--color-teal-1000);
  --button-base-icon-active: var(--color-white-1000);
  --button-base-icon-disabled: var(--color-dark-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-dark-200);
  --badge-role-ospite-text: var(--color-dark-500);
  --badge-role-familiare-bg: var(--color-purple-200);
  --badge-role-familiare-text: var(--color-purple-1000);
  --badge-badge-dot-bg: var(--color-dark-50);
  --badge-badge-primary: var(--color-dark-1000);
  --badge-badge-secondary: var(--color-grey-400);
  --toggle-surface: var(--color-dark-50);
  --toggle-surface-active: var(--color-teal-200);
  --toggle-nob: var(--color-dark-200);
  --toggle-nob-active: var(--color-teal-1000);
  --tab-default: var(--color-dark-300);
  --tab-active: var(--color-teal-1000);
  --tab-inactive: var(--color-teal-300);
  --tab-label-dafault: var(--color-dark-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-2);
  --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-full);
  --radius-button-base: var(--radius-5);
  --radius-badge: var(--radius-full);
  --radius-list-item: var(--radius-4);
  --radius-card: var(--radius-5);
  --radius-input: var(--radius-full);
  --radius-bottom-bar: var(--radius-full);
  --radius-header-bar: var(--radius-4);
  --radius-image: var(--radius-4);
  --radius-offcanvas: var(--radius-5);
  --radius-card-inner: var(--radius-3);
  --radius-tab: var(--radius-full);
  --radius-tab-vertical: var(--radius-4);
  --radius-dimmer: var(--radius-5);
  --radius-full: 9999px;
  --color-teal-100: rgba(2, 119, 142, 0.1);
  --color-teal-200: rgba(2, 119, 142, 0.2);
  --color-teal-300: rgba(2, 119, 142, 0.3);
  --color-teal-400: rgba(2, 119, 142, 0.4);
  --color-teal-500: rgba(2, 119, 142, 0.5);
  --color-teal-600: rgba(2, 119, 142, 0.6);
  --color-teal-700: rgba(2, 119, 142, 0.7);
  --color-teal-800: rgba(2, 119, 142, 0.8);
  --color-teal-900: rgba(2, 119, 142, 0.9);
  --color-teal-1000: #02778e;
  --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(3, 15, 19, 0.05);
  --color-dark-150: rgba(3, 15, 19, 0.15);
  --color-dark-200: rgba(3, 15, 19, 0.2);
  --color-dark-300: rgba(3, 15, 19, 0.3);
  --color-dark-400: rgba(3, 15, 19, 0.4);
  --color-dark-500: rgba(3, 15, 19, 0.5);
  --color-dark-600: rgba(3, 15, 19, 0.6);
  --color-dark-700: rgba(3, 15, 19, 0.7);
  --color-dark-800: rgba(3, 15, 19, 0.8);
  --color-dark-900: rgba(3, 15, 19, 0.9);
  --color-dark-1000: #030f13;
  --color-grey-100: #f0f0f0;
  --color-grey-400: #969b9c;
  --color-red-50: #fcefef;
  --color-red-100: #de6060;
  --color-green-50: #d0f0e0;
  --color-green-100: #0d9c49;
  --color-yellow-50: #fff3b6;
  --color-yellow-100: #ffd60a;
  --color-orange-50: #fff0df;
  --color-orange-100: #f58f14;
  --color-cyano-50: #def0f7;
  --color-cyano-100: #58b4d9;
  --color-purple-200: rgba(209, 155, 205, 0.2);
  --color-purple-1000: #d19bcd;
}

.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: 'Epika Serif Regular', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  letter-spacing: -0.24px;
}

.body-lead {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -0.72px;
}

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

h1 {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 40px;
  letter-spacing: -0.8px;
}

h2 {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  letter-spacing: -0.64px;
}

h3 {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  letter-spacing: -0.56px;
}

h4 {
  font-family: 'Soehne Buch', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  letter-spacing: -1px;
}

h5 {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 20px;
  letter-spacing: -0.8px;
}

h6 {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  letter-spacing: -0.64px;
}

.components-offcanvas-title {
  font-family: 'Epika Serif Regular', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  letter-spacing: -0.64px;
}