@import url("https://fonts.googleapis.com/css2?family=Custom+Font:wght@400;700&display=swap");

:root {
  --color-primary: #005E99;
  --color-primary-50: #ADE0FF;
  --color-primary-100: #9EDAFF;
  --color-primary-200: #80CEFF;
  --color-primary-300: #4DBBFF;
  --color-primary-400: #009AFA;
  --color-primary-500: #005E99;
  --color-primary-600: #004875;
  --color-primary-700: #003252;
  --color-primary-800: #001929;
  --color-primary-900: #000305;
  --color-primary-950: #000000;
  --color-accent: #F59300;
  --color-accent-50: #FFF1DB;
  --color-accent-100: #FFEDD1;
  --color-accent-200: #FFE2B8;
  --color-accent-300: #FFD08A;
  --color-accent-400: #FFB647;
  --color-accent-500: #F59300;
  --color-accent-600: #C77700;
  --color-accent-700: #995C00;
  --color-accent-800: #663D00;
  --color-accent-900: #382200;
  --color-accent-950: #241500;
  --color-background: #ffffff;
  --color-foreground: #0f1c28;
  --color-text-heading: #001627;
  --color-text-body: #1a2d3d;
  --color-text-muted: #4a6275;
  --color-text-placeholder: #7a95a8;
  --color-text-disabled: #b0c4d0;
  --color-text-link: #003a60;
  --color-text-link-hover: #002e4d;
  --color-surface: #f4f7f9;
  --color-surface-variant: #e8eef3;
  --color-surface-elevated: #ffffff;
  --color-border: #cce1ef;
  --color-border-light: #e8eef3;
  --color-border-dark: #7a95a8;
  --color-semantic-success: #0f5534;
  --color-semantic-success-light: #98c4af;
  --color-semantic-success-border: #769e8b;
  --color-semantic-success-readable: #0f5534;
  --color-semantic-error: #8d2222;
  --color-semantic-error-light: #e9abab;
  --color-semantic-error-border: #c08484;
  --color-semantic-error-readable: #8d2222;
  --color-semantic-warning: #754600;
  --color-semantic-warning-light: #d6c09e;
  --color-semantic-warning-border: #b49b75;
  --color-semantic-warning-readable: #754600;
  --color-semantic-info: #004c7a;
  --color-semantic-info-light: #96bdd5;
  --color-semantic-info-border: #719cb5;
  --color-semantic-info-readable: #004c7a;
  --color-primary-readable: #004875;
  --color-text-muted-readable: #4a6275;
  --header-bg: #003a60;
  --header-text: #ffffff;
  --header-link: #ffffff;
  --header-link-hover: #f59300;
  --header-border: #002e4d;
  --footer-bg: #003a60;
  --footer-text: #ffffff;
  --footer-link: #ffffff;
  --footer-link-hover: #f59300;
  --footer-border: #003a60;
  --nav-bg: #002e4d;
  --nav-text: #cce1ef;
  --nav-link: #fbb347;
  --nav-link-hover: #ffffff;
  --nav-border: #003a60;
  --color-btn-primary-bg: #003a60;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #002e4d;
  --color-btn-primary-border: #003a60;
  --color-btn-secondary-bg: #f4f7f9;
  --color-btn-secondary-text: #1a2d3d;
  --color-btn-secondary-hover: #e8eef3;
  --color-btn-secondary-border: #b0c4d0;
  --font-family-heading: Custom Font;
  --font-heading-weights: 400,700;
  --font-family-body: Custom Font;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-width-thin: 1px;
  --border-width: 2px;
  --border-width-thick: 4px;
}

:root:where([data-theme-mode="light"]) {
  --color-primary: #005E99;
  --color-primary-50: #ADE0FF;
  --color-primary-100: #9EDAFF;
  --color-primary-200: #80CEFF;
  --color-primary-300: #4DBBFF;
  --color-primary-400: #009AFA;
  --color-primary-500: #005E99;
  --color-primary-600: #004875;
  --color-primary-700: #003252;
  --color-primary-800: #001929;
  --color-primary-900: #000305;
  --color-primary-950: #000000;
  --color-accent: #F59300;
  --color-accent-50: #FFF1DB;
  --color-accent-100: #FFEDD1;
  --color-accent-200: #FFE2B8;
  --color-accent-300: #FFD08A;
  --color-accent-400: #FFB647;
  --color-accent-500: #F59300;
  --color-accent-600: #C77700;
  --color-accent-700: #995C00;
  --color-accent-800: #663D00;
  --color-accent-900: #382200;
  --color-accent-950: #241500;
  --color-background: #ffffff;
  --color-foreground: #0f1c28;
  --color-text-heading: #001627;
  --color-text-body: #1a2d3d;
  --color-text-muted: #4a6275;
  --color-text-placeholder: #7a95a8;
  --color-text-disabled: #b0c4d0;
  --color-text-link: #003a60;
  --color-text-link-hover: #002e4d;
  --color-surface: #f4f7f9;
  --color-surface-variant: #e8eef3;
  --color-surface-elevated: #ffffff;
  --color-border: #cce1ef;
  --color-border-light: #e8eef3;
  --color-border-dark: #7a95a8;
  --color-semantic-success: #0f5534;
  --color-semantic-success-light: #98c4af;
  --color-semantic-success-border: #769e8b;
  --color-semantic-success-readable: #0f5534;
  --color-semantic-error: #8d2222;
  --color-semantic-error-light: #e9abab;
  --color-semantic-error-border: #c08484;
  --color-semantic-error-readable: #8d2222;
  --color-semantic-warning: #754600;
  --color-semantic-warning-light: #d6c09e;
  --color-semantic-warning-border: #b49b75;
  --color-semantic-warning-readable: #754600;
  --color-semantic-info: #004c7a;
  --color-semantic-info-light: #96bdd5;
  --color-semantic-info-border: #719cb5;
  --color-semantic-info-readable: #004c7a;
  --color-primary-readable: #004875;
  --color-text-muted-readable: #4a6275;
  --header-bg: #003a60;
  --header-text: #ffffff;
  --header-link: #ffffff;
  --header-link-hover: #f59300;
  --header-border: #002e4d;
  --footer-bg: #003a60;
  --footer-text: #ffffff;
  --footer-link: #ffffff;
  --footer-link-hover: #f59300;
  --footer-border: #003a60;
  --nav-bg: #002e4d;
  --nav-text: #cce1ef;
  --nav-link: #fbb347;
  --nav-link-hover: #ffffff;
  --nav-border: #003a60;
  --color-btn-primary-bg: #003a60;
  --color-btn-primary-text: #ffffff;
  --color-btn-primary-hover: #002e4d;
  --color-btn-primary-border: #003a60;
  --color-btn-secondary-bg: #f4f7f9;
  --color-btn-secondary-text: #1a2d3d;
  --color-btn-secondary-hover: #e8eef3;
  --color-btn-secondary-border: #b0c4d0;
  --font-family-heading: Custom Font;
  --font-heading-weights: 400,700;
  --font-family-body: Custom Font;
  --font-body-weights: 400,700;
  --spacing-base: 4px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --border-width-thin: 1px;
  --border-width: 2px;
  --border-width-thick: 4px;
}

@font-face {
  font-family: 'Custom Font';
  src: url(https://storage.googleapis.com/korona-event-de-production-store/f745c4eb1ca9933b5b83da7d8bfb9a43.woff2);
  font-display: swap;
}

@font-face {
  font-family: 'Custom Font';
  src: url(https://storage.googleapis.com/korona-event-de-production-store/080ea2e88eff9c4fa76b317da864612f.woff2);
  font-weight: 700;
  font-display: swap;
}

:root {
  --text-sm: calc(0.875rem + 1px);
  --text-base: calc(1rem + 1px);
}