@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --color-primary-00: #FFFFFF;
  --color-primary-05: #FDF4F6;
  --color-primary-50: #FBEAEE;
  --color-primary-100: #F3B9C7;
  --color-primary-300: #E66885;
  --color-primary-500: #D91E49;
  --color-primary-700: #9A1534;
  --color-primary-900: #5B0D1F;

  --color-secondary-00: #FFFFFF;
  --color-secondary-05: #F4F7F6;
  --color-secondary-50: #EBF0ED;
  --color-secondary-100: #BECEC5;
  --color-secondary-300: #729582;
  --color-secondary-500: #2C6145;
  --color-secondary-700: #1F4531;
  --color-secondary-900: #12291D;


  --color-additional-00: #ffffff;
  --color-additional-05: #fefbfe;
  --color-additional-50: #fdf1fc;
  --color-additional-100: #f8d5f6;
  --color-additional-200: #f5c0f2;
  --color-additional-300: #f0a3ec;
  --color-additional-400: #ed91e9;
  --color-additional-500: #c6563a;
  --color-additional-600: #d46bcf;
  --color-additional-700: #a554a1;
  --color-additional-800: #80417d;
  --color-additional-900: #62325f;

  --primary-element-background: var(--color-primary-00);
  --primary-element-subtle: var(--color-primary-50);
  --primary-element-pale: var(--color-primary-05);
  --primary-element-light: var(--color-primary-100);
  --primary-element-mid-light: var(--color-primary-300);
  --primary-element-mid: var(--color-primary-500);
  --primary-element-mid-dark: var(--color-primary-700);
  --primary-element-dark: var(--color-primary-900);

  --primary-button-foreground-ondark: var(--color-primary-00);
  --primary-button-foreground-onlight: var(--color-primary-500);
  --primary-button-label-inverted: var(--color-primary-900);
  --primary-button-resting: var(--color-primary-500);
  --primary-button-hover: var(--color-primary-700);
  --primary-button-pressed: var(--color-primary-900);

  --primary-nav-label-selected: var(--color-primary-00);
  --primary-nav-label-resting: var(--color-primary-700);
  --primary-nav-label-hover: var(--color-primary-900);
  --primary-nav-label-pressed: var(--color-primary-900);
  --primary-nav-container-selected: var(--color-primary-500);
  --primary-nav-container-selected-hover: var(--color-primary-700);

  --primary-chip-label-selected: var(--color-primary-500);
  --primary-chip-border-selected: var(--color-primary-500);
  --primary-chip-container-selected: var(--color-primary-50);
  --primary-chip-container-selected-hover: var(--color-primary-100);

  --primary-tab-label-resting: var(--color-primary-00);
  --primary-tab-container-active: var(--color-primary-00);
  --primary-tab-container-resting: var(--color-primary-500);
  --primary-tab-container-resting-hover: var(--color-primary-700);

  --primary-title-inverted: var(--color-primary-00);
  --primary-title-page-title: var(--color-primary-900);
  --primary-title-page-subtitle: var(--color-primary-700);
  --primary-title-card-title: var(--color-primary-900);
  --primary-title-card-subtitle: var(--color-primary-700);
  --primary-title-highlight: var(--color-primary-600);

  --primary-body-text-inverted: var(--color-primary-00);
  --primary-body-text-highlight: var(--color-primary-600);

  --primary-overlay-overlaylight: rgba(48, 22, 74, 0.62);

  --primary-shadow-branded: var(--color-primary-900);

  --secondary-element-background: var(--color-secondary-00);
  --secondary-element-pale: var(--color-secondary-05);
  --secondary-element-subtle: var(--color-secondary-50);
  --secondary-element-light: var(--color-secondary-100);
  --secondary-element-mid-light: var(--color-secondary-300);
  --secondary-element-mid: var(--color-secondary-500);
  --secondary-element-mid-dark: var(--color-secondary-700);
  --secondary-element-dark: var(--color-secondary-900);

  --secondary-button-foreground-ondark: var(--color-secondary-00);
  --secondary-button-foreground-onlight: var(--color-secondary-500);
  --secondary-button-label-inverted: var(--color-secondary-900);
  --secondary-button-resting: var(--color-secondary-500);
  --secondary-button-hover: var(--color-secondary-700);
  --secondary-button-pressed: var(--color-secondary-800);

  --secondary-title-inverted: var(--color-secondary-00);
  --secondary-title-page-title: var(--color-secondary-900);
  --secondary-title-page-subtitle: var(--color-secondary-700);
  --secondary-title-card-title: var(--color-secondary-900);
  --secondary-title-card-subtitle: var(--color-secondary-700);
  --secondary-title-highlight: var(--color-secondary-600);

  --secondary-body-text-inverted: var(--color-secondary-00);
  --secondary-body-text-highlight: var(--color-secondary-600);

  --tertiary-button-foreground-ondark: var(--color-tertiary-00);
  --tertiary-button-foreground-onlight: var(--color-tertiary-500);
  --tertiary-button-label-inverted: var(--color-tertiary-900);
  --tertiary-button-resting: var(--color-tertiary-500);
  --tertiary-button-hover: var(--color-tertiary-700);
  --tertiary-button-pressed: var(--color-tertiary-800);

  --gradient-element-flashing: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 50.52%, var(--color-secondary-100) 100%);
  --gradient-element-fade: linear-gradient(90deg, #F9FAFF 0%, #F9FAFF 100%);
  --gradient-element-pattern: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 50.52%, var(--color-secondary-100) 100%);

  --gradient-navigation-separator: linear-gradient(90deg, #582887 0%, #582887 50%, #582887 100%);
  --gradient-navigation-fade: linear-gradient(90deg, #F6E7F1 0%, #F6E7F1 100%);
  --font-title: "Noto Sans";
}
body {
  background: var(--primary-element-background);
}