@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

package/src/utils/index.ts

@@ -1,734 +1,734 @@
-import { se } from "date-fns/locale";
-import { ref } from "vue";
-
-const appointmentTypes = [
-  {
-    id: 0,
-    icon: 'simple',
-    title: 'Simple',
-    content: '1 Patient <br>1 Behandler <br>1 Behandlungen',
-    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
-    additionalClass: "hidden"
-  },
-  {
-    id: 1,
-    icon: 'multitermin',
-    title: 'Multitermin',
-    content: '1 Patient <br>1 Behandler <br>2 Behandlungen',
-    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
-    additionalClass: ""
-  },
-  {
-    id: 2,
-    icon: 'supervision',
-    title: 'Supervision',
-    content: '1 Patient <br>2 Behandler <br> 1 Behandlungen',
-    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
-    additionalClass: ""
-  },
-  {
-    id: 3,
-    icon: 'doppeltermin',
-    title: 'Doppeltermin',
-    content: '2 Patienten <br> 1 Behandler <br> 1 Behandlungen',
-    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
-    additionalClass: ""
-  },
-  {
-    id: 4,
-    icon: 'kombitermin',
-    title: 'Kombitermin',
-    content: '1 Patient <br> 2 Behandler <br> 2 Behandlungen',
-    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
-    additionalClass: ""
-  },
-];
-
-const getDomainName = () => {
-  const host = window.location.hostname;
-  const m = host.match(/([^.]+)\.app/);
-  return m?.[1] ?? null;
-}
-
-const generateDynamicDomain = () => {
-  const protocol = window.location.protocol; // e.g., "http:"
-  const host = window.location.host; // e.g., "localhost:3000"
-  return `${protocol}//${host}`; // Combine protocol and host
-};
-
-// Check for testing override in localStorage or URL parameter
-const getTestingDomainOverride = () => {
-  // Check URL parameter first
-  if (typeof window !== 'undefined') {
-    const urlParams = new URLSearchParams(window.location.search);
-    const urlDomain = urlParams.get('testDomain');
-    if (urlDomain === 'domain-cocoon' || urlDomain === 'domain-dental') {
-      return urlDomain;
-    }
-
-    // Check localStorage second
-    const storedDomain = localStorage.getItem('testDomain');
-    if (storedDomain === 'domain-cocoon' || storedDomain === 'domain-dental') {
-      return storedDomain;
-    }
-  }
-  return null;
-};
-
-const domain: any = ref(null);
-const testingOverride = getTestingDomainOverride();
-
-if (testingOverride) {
-  // Use testing override if available
-  domain.value = testingOverride;
-} else {
-  // Use actual domain detection
-  const currentDomain = generateDynamicDomain().toLowerCase();
-  if (currentDomain.includes("white-cocoon")) {
-    domain.value = "domain-cocoon";
-  } else {
-    domain.value = "domain-dental";
-  }
-}
-
-// Function to get colors for a specific domain
-const getColorsForDomain = (domainValue: string) => {
-  if (domainValue === "domain-cocoon") {
-    return {
-      "primary-color": "var(--Dark-Nude-2)",
-
-      /* Button colors */
-      button_default_bg: "var(--Dark-Nude-2)",
-      button_pressed_bg: "var(--Dark-Nude-3)",
-      button_hovered_bg: "var(--Night-Nude--1)",
-      button_disabled_bg: "var(--Night-Nude--3)",
-      button_default_text: "var(--White-0)",
-
-      button_outline_border: "var(--Dark-Nude-3)",
-      button_outline_pressed_bg: "var(--Dark-Nude-2)",
-      button_outline_hovered_bg: "var(--Night-Nude-2)",
-      button_outline_hovered_border: "var(--Night-Nude-2)",
-      button_outline_disabled_border: "var(--Night-Nude--1)",
-      button_outline_default_text: "var(--Dark-Nude-3)",
-      button_outline_disabled_text: "var(--Night-Nude--1)",
-      /* End button colors */
-
-      /* Checkbox colors */
-      checkbox_default_text: "var(--Dark-Nude-3)",
-
-      checkbox_defaut_border: "var(--Night-Nude--2)",
-      checkbox_default_bg: "var(--White-0)",
-
-      checkbox_hovered_border: "var(--Dark-Nude-2)",
-      checkbox_hovered_bg: "var(--Warm-Light--2)",
-
-      checkbox_checked_border: "var(--Night-Nude-0)",
-      checkbox_checked_bg: "var(--White-0)",
-
-      checkbox_error_border: "var(--Error-Red-0)",
-      checkbox_error_bg: "var(--Light-Gum--3)",
-      checkbox_error_text: "var(--Error-Red-0)",
-
-      checkbox_success_border: "var(--Success-Green-0)",
-      checkbox_success_bg: "var(--Success-Green--1)",
-      checkbox_success_text: "var(--Success-Green-1)",
-
-      checkbox_disabled_border: "var(--Night-Nude--1)",
-      checkbox_disabled_bg: "var(--White-0)",
-      checkbox_disabled_text: "var(--Night-Nude--1)",
-
-      checkbox_default_checkmark: "var(--Night-Nude-0)",
-      checkbox_hovered_checkmark: "var(--Night-Nude-2)",
-      checkbox_error_checkmark: "var(--Error-Red-0)",
-      checkbox_success_checkmark: "var(--Success-Green-0)",
-      checkbox_disabled_checkmark: "var(--Night-Nude--1)",
-      /* End checkbox colors */
-
-      /* Logo colors */
-      logo_primary_fill: "var(--Dark-Nude-2)",
-      /* End logo colors */
-
-      /* Input colors */
-      input_default_border: "var(--Dark-Nude--2)",
-      input_default_bg: "var(--Light-Nude--4)",
-      input_default_icon_color: "var(--Dark-Nude-2)",
-      input_default_text: "var(--Dark-Nude-0)",
-
-      input_active_border: "var(--Dark-Nude--2)",
-      input_active_bg: "var(--Light-Nude--4)",
-      input_active_icon_color: "var(--Dark-Nude-2)",
-      input_active_text: "var(--Dark-Nude-3)",
-
-      input_focused_border: "var(--Dark-Nude-2)",
-      input_focused_bg: "var(--White-0)",
-      input_focused_icon_color: "var(--Dark-Nude-2)",
-      input_focused_text: "var(--Dark-Nude-2)",
-
-      input_disabled_border: "var(--Dark-Nude-0)",
-      input_disabled_bg: "var(--Light-Nude--4)",
-      input_disabled_icon_color: "var(--Dark-Nude-0)",
-      input_disabled_text: "var(--Dark-Nude-0)",
-
-      input_error_border: "var(--Error-Red-0)",
-      input_error_bg: "var(--Light-Gum--3)",
-      input_error_icon_color: "var(--Error-Red-0)",
-      input_error_text: "var(--Error-Red-0)",
-
-      input_success_border: "var(--Success-Green-0)",
-      input_success_bg: "var(--Success-Green--1)",
-      input_success_icon_color: "var(--Success-Green-1)",
-      input_success_text: "var(--Success-Green-1)",
-
-      input_warning_border: "var(--Warning-Yellow-0)",
-      input_warning_bg: "var(--Warm-Light--2)",
-      input_warning_icon_color: "var(--Warm-Light-3)",
-      input_warning_text: "var(--Dark-Nude-3)",
-      /* End input colors */
-
-      /* Select Item colors */
-      select_item_text: "var(--Night-Nude-2)",
-      select_item_default_bg: "var(--White-0)",
-      select_item_hovered_bg: "var(--Dark-Nude--3)",
-      select_item_selected_left_border: "var(--Night-Nude-2)",
-      select_item_selected_bg: "var(--White-0)",
-      /* End Select Item colors */
-
-      /* Accordion colors */
-      accordion_headline_color: "var(--Dark-Nude-2)",
-      accordion_title_color: "var(--Dark-Nude-2)",
-      accordion_content_color: "var(--Dark-Nude-3)",
-      accordion_divider_color: "var(--Night-Nude--2)",
-      accordion_icon_color: "var(--Dark-Nude-2)",
-      /* End Accordion colors */
-
-      /* Appointment card colors */
-      appointment_card_header_default_bg: "var(--Dark-Nude--3)",
-      appointment_card_header_text: "var(--Dark-Nude-3)",
-      appointment_card_default_bg: "var(--White-0)",
-      appointment_card_title: "var(--Dark-Nude-3)",
-      appointment_card_text: "var(--Dark-Nude-2)",
-      appointment_card_delimiter: "var(--Night-Nude--2)",
-      /* End Appointment card colors */
-
-      /* Progress bar colors */
-      progress_bar_bg: "var(--Night-Nude--3)",
-      progress_bar_fill: "var(--Dark-Nude-0)",
-      /* End Progress bar colors */
-
-      /* Navigation colors */
-      nav_bg: "var(--Warm-Air--4)",
-      nav_item_active_bg: "var(--Dark-Nude--2)",
-      nav_item_text: "var(--Dark-Nude-2)",
-      nav_item_icon: "var(--Dark-Nude-2)",
-      /* End Navigation colors */
-
-      /* Toggle colors */
-      toggle_inactive_bg: "var(--Night-Nude--2)",
-      toggle_active_bg: "var(--Dark-Nude-2)",
-      toggle_text: "var(--Dark-Nude-2)",
-      /* End Toggle colors */
-
-      /* Loader colors */
-      loader_fill: "var(--Dark-Nude-2)",
-      loader_text: "var(--Dark-Nude-2)",
-      /* End Loader colors */
-
-      /* Focus colors */
-      focus_ring_color: "var(--Dark-Nude-2)",
-      /* End Focus colors */
-
-      /* Card/List item colors */
-      card_bg: "var(--White-0)",
-      card_hover_bg: "var(--Dark-Nude--3)",
-      card_border: "var(--Night-Nude--2)",
-      card_divider: "var(--Night-Nude--2)",
-      /* End Card/List item colors */
-
-      /* Tile colors */
-      tile_bg: "var(--White-0)",
-      tile_border: "var(--Dark-Nude--2)",
-      tile_hover_bg: "var(--Dark-Nude--4)",
-      tile_pressed_bg: "var(--Dark-Nude--3)",
-      tile_title_color: "var(--Dark-Nude-3)",
-      tile_description_color: "var(--Dark-Nude-3)",
-      tile_label_text_color: "var(--Dark-Nude-3)",
-      tile_label_bg: "var(--Dark-Nude--2)",
-      tile_icon_color: "var(--Dark-Nude-3)",
-      tile_focus_ring: "var(--Dark-Nude-2)",
-      tile_disabled_border: "var(--Night-Nude--2)",
-      /* End Tile colors */
-
-      /* Status badge colors */
-      badge_available_border: "var(--Success-Green-0)",
-      badge_available_text: "var(--Success-Green-0)",
-      badge_available_subtext: "var(--Success-Green-1)",
-      badge_unavailable_border: "var(--Error-Red-1)",
-      badge_unavailable_text: "var(--Error-Red-0)",
-      badge_unavailable_subtext: "var(--Error-Red-1)",
-      /* End Status badge colors */
-
-      /* Page state colors */
-      state_success_title: "var(--Success-Green-0)",
-      state_error_title: "var(--Error-Red-0)",
-      state_info_icon: "var(--Dark-Nude-2)",
-      state_info_text: "var(--Dark-Nude-2)",
-      /* End Page state colors */
-
-      /* Destructive action colors */
-      action_destructive_icon: "var(--Power-Red-0)",
-      action_destructive_text: "var(--Power-Red-0)",
-      /* End Destructive action colors */
-
-      /* Background colors */
-      page_bg: "var(--Warm-Air--4)",
-      section_bg: "var(--White-0)",
-      /* End Background colors */
-
-      /* Primary text and icon colors */
-      icon_primary: "var(--Dark-Nude-2)",
-      text_primary: "var(--Dark-Nude-2)",
-      text_secondary: "var(--Dark-Nude-3)",
-      divider_primary: "var(--Night-Nude--2)",
-      border_primary: "var(--Dark-Nude-0)",
-      /* End Primary text and icon colors */
-
-      /* Slot grid colors */
-      slot_header_bg: "var(--Night-Nude--3)",
-      slot_button_bg: "var(--Warm-Air--4)",
-      slot_button_hover_bg: "var(--Night-Nude--2)",
-      /* End Slot grid colors */
-
-      other_locations_banner_bg: "var(--Dark-Nude--3)",
-      other_locations_bg: "var(--Night-Nude-2)",
-
-      /* To be checked the validity of these colors */
-      font_color: "!text-[var(--Dark-Nude-3)]",
-      font_color_title: "!text-[var(--Dark-Nude-2)]",
-      font_color_code: "var(--Dark-Nude-3)",
-      font_color_title_code: "var(--Dark-Nude-2)",
-      "border-b": "border-b-[var(--Night-Nude-0)]",
-      bg_0: "bg-[var(--Warm-Air--4)]",
-      font_family: "font-['arial']",
-      btn_bg: "var(--Dark-Nude-2)",
-      "border-color": "var(--Dark-Nude-0)",
-      "slot-bg": "var(--Light-Nude-0)",
-      "slot-text": "var(--Dark-Nude-3)",
-      "divider-color": "divide-[var(--Dark-Nude-0)]",
-      bg_logo_fill_color: "var(--Warm-Air--3)",
-      bg_card_title: "bg-[var(--Dark-Nude--3)]",
-      button_rounded: "0",
-      /* End Colors*/
-
-      /* Domain */
-      domain: domainValue,
-    };
-  } else {
-    return {
-      "primary-color": "var(--Dental-Blue-0)",
-
-      /* Button colors */
-      button_default_bg: "var(--Dental-Blue-0)",
-      button_pressed_bg: "var(--Dental-Blue-1)",
-      button_hovered_bg: "var(--Dental-Blue--1)",
-      button_disabled_bg: "var(--Soft-Concrete-1)",
-      button_default_text: "var(--White-0)",
-
-      button_outline_border: "var(--Dental-Blue-0)",
-      button_outline_pressed_bg: "var(--Dental-Blue--5)",
-      button_outline_hovered_bg: "var(--Dental-Blue--6)",
-      button_outline_hovered_border: "var(--Dental-Blue-0)",
-      button_outline_disabled_border: "var(--Soft-Concrete-2)",
-      button_outline_default_text: "var(--Dental-Blue-0)",
-      button_outline_disabled_text: "var(--Soft-Concrete-2)",
-      /* End button colors */
-
-      /* Checkbox colors */
-      checkbox_default_text: "var(--Dental-Blue-0)",
-
-      checkbox_defaut_border: "var(--Soft-Concrete-2)",
-      checkbox_default_bg: "var(--White-0)",
-
-      checkbox_hovered_border: "var(--Dental-Blue--1)",
-      checkbox_hovered_bg: "var(--Dental-Light-Blue--2)",
-
-      checkbox_checked_border: "var(--Dental-Blue-0)",
-      checkbox_checked_bg: "var(--White-0)",
-
-      checkbox_error_border: "var(--Error-Red-0)",
-      checkbox_error_bg: "var(--Light-Gum--3)",
-      checkbox_error_text: "var(--Error-Red-0)",
-
-      checkbox_success_border: "var(--Success-Green-0)",
-      checkbox_success_bg: "var(--Success-Green--1)",
-      checkbox_success_text: "var(--Success-Green-1)",
-
-      checkbox_disabled_border: "var(--Soft-Concrete-2)",
-      checkbox_disabled_bg: "var(--White-0)",
-      checkbox_disabled_text: "var(--Soft-Concrete-2)",
-
-      checkbox_default_checkmark: "var(--Dental-Blue-0)",
-      checkbox_hovered_checkmark: "var(--Dental-Blue--1)",
-      checkbox_error_checkmark: "var(--Error-Red-0)",
-      checkbox_success_checkmark: "var(--Success-Green-0)",
-      checkbox_disabled_checkmark: "var(--Soft-Concrete-2)",
-      /* End checkbox colors */
-
-      /* Logo colors */
-      logo_primary_fill: "var(--Dental-Blue-0)",
-      /* End logo colors */
-
-      /* Input colors */
-      input_default_border: "var(--Soft-Concrete-1)",
-      input_default_bg: "var(--White-0)",
-      input_default_icon_color: "var(--Dental-Blue-0)",
-      input_default_text: "var(--Dental-Blue--2)",
-
-      input_active_border: "var(--Soft-Concrete-1)",
-      input_active_bg: "var(--White-0)",
-      input_active_icon_color: "var(--Dental-Blue-0)",
-      input_active_text: "var(--Dental-Blue-0)",
-
-      input_focused_border: "var(--Dental-Light-Blue-1)",
-      input_focused_bg: "var(--White-0)",
-      input_focused_icon_color: "var(--Dental-Blue-0)",
-      input_focused_text: "var(--Dental-Blue-0)",
-
-      input_disabled_border: "var(--Soft-Concrete-1)",
-      input_disabled_bg: "var(--White-0)",
-      input_disabled_icon_color: "var(--Soft-Concrete-1)",
-      input_disabled_text: "var(--Soft-Concrete-1)",
-
-      input_error_border: "var(--Error-Red-0)",
-      input_error_bg: "var(--Light-Gum--3)",
-      input_error_icon_color: "var(--Error-Red-0)",
-      input_error_text: "var(--Error-Red-0)",
-
-      input_success_border: "var(--Success-Green-0)",
-      input_success_bg: "var(--Success-Green--1)",
-      input_success_icon_color: "var(--Success-Green-1)",
-      input_success_text: "var(--Success-Green-1)",
-
-      input_warning_border: "var(--Warning-Yellow-0)",
-      input_warning_bg: "var(--Warm-Light--2)",
-      input_warning_icon_color: "var(--Warm-Light-3)",
-      input_warning_text: "var(--Warm-Light-3)",
-      /* End input colors */
-
-      /* Select Item colors */
-      select_item_text: "var(--Dental-Blue-0)",
-      select_item_default_bg: "var(--White-0)",
-      select_item_hovered_bg: "var(--Soft-Concrete-1)",
-      select_item_selected_left_border: "var(--Dental-Blue-0)",
-      select_item_selected_bg: "var(--White-0)",
-      /* End Select Item colors */
-
-      /* Accordion colors */
-      accordion_headline_color: "var(--Dental-Blue-0)",
-      accordion_title_color: "var(--Dental-Blue-0)",
-      accordion_content_color: "var(--Dental-Blue-0)",
-      accordion_divider_color: "var(--Soft-Concrete-1)",
-      accordion_icon_color: "var(--Dental-Blue-0)",
-      /* End Accordion colors */
-
-      /* Appointment card colors */
-      appointment_card_header_default_bg: "var(--Dental-Light-Blue--1)",
-      appointment_card_header_text: "var(--Dental-Blue-0)",
-      appointment_card_default_bg: "var(--White-0)",
-      appointment_card_title: "var(--Dental-Blue-0)",
-      appointment_card_text: "var(--Dental-Blue--2)",
-      appointment_card_delimiter: "var(--Soft-Concrete-1)",
-      /* End Appointment card colors */
-
-      /* Progress bar colors */
-      progress_bar_bg: "var(--Soft-Concrete-0)",
-      progress_bar_fill: "var(--Dental-Light-Blue-0)",
-      /* End Progress bar colors */
-
-      /* Navigation colors */
-      nav_bg: "var(--Dental-Light-Blue--3)",
-      nav_item_active_bg: "var(--Dental-Light-Blue-1)",
-      nav_item_text: "var(--Dental-Blue-0)",
-      nav_item_icon: "var(--Dental-Blue-0)",
-      /* End Navigation colors */
-
-      /* Toggle colors */
-      toggle_inactive_bg: "var(--Dental-Blue--5)",
-      toggle_active_bg: "var(--Dental-Blue-0)",
-      toggle_text: "var(--Dental-Blue-0)",
-      /* End Toggle colors */
-
-      /* Loader colors */
-      loader_fill: "var(--Dental-Blue-0)",
-      loader_text: "var(--Dental-Blue-0)",
-      /* End Loader colors */
-
-      /* Focus colors */
-      focus_ring_color: "var(--Dental-Blue-0)",
-      /* End Focus colors */
-
-      /* Card/List item colors */
-      card_bg: "var(--White-0)",
-      card_hover_bg: "var(--Dental-Blue--6)",
-      card_border: "var(--Soft-Concrete-1)",
-      card_divider: "var(--Dental-Blue--4)",
-      /* End Card/List item colors */
-
-      /* Tile colors */
-      tile_bg: "var(--White-0)",
-      tile_border: "var(--Soft-Concrete-2)",
-      tile_hover_bg: "var(--Dental-Blue--6)",
-      tile_pressed_bg: "var(--Dental-Blue--5)",
-      tile_title_color: "var(--Dental-Blue-0)",
-      tile_description_color: "var(--Dental-Blue-0)",
-      tile_label_text_color: "var(--Dental-Blue-0)",
-      tile_label_bg: "var(--Dental-Light-Blue-0)",
-      tile_icon_color: "var(--Dental-Blue-0)",
-      tile_focus_ring: "var(--Dental-Blue-0)",
-      tile_disabled_border: "var(--Soft-Concrete-2)",
-      /* End Tile colors */
-
-      /* Status badge colors */
-      badge_available_border: "var(--Success-Green-0)",
-      badge_available_text: "var(--Success-Green-0)",
-      badge_available_subtext: "var(--Success-Green-1)",
-      badge_unavailable_border: "var(--Error-Red-1)",
-      badge_unavailable_text: "var(--Error-Red-0)",
-      badge_unavailable_subtext: "var(--Error-Red-1)",
-      /* End Status badge colors */
-
-      /* Page state colors */
-      state_success_title: "var(--Success-Green-0)",
-      state_error_title: "var(--Error-Red-0)",
-      state_info_icon: "var(--Dental-Blue-0)",
-      state_info_text: "var(--Dental-Blue-0)",
-      /* End Page state colors */
-
-      /* Destructive action colors */
-      action_destructive_icon: "var(--Power-Red-0)",
-      action_destructive_text: "var(--Power-Red-0)",
-      /* End Destructive action colors */
-
-      /* Background colors */
-      page_bg: "var(--Dental-Light-Blue--3)",
-      section_bg: "var(--White-0)",
-      /* End Background colors */
-
-      /* Primary text and icon colors */
-      icon_primary: "var(--Dental-Blue-0)",
-      text_primary: "var(--Dental-Blue-0)",
-      text_secondary: "var(--Dental-Blue--2)",
-      divider_primary: "var(--Dental-Blue--4)",
-      border_primary: "var(--Dental-Blue-0)",
-      /* End Primary text and icon colors */
-
-      /* Slot grid colors */
-      slot_header_bg: "var(--Dental-Light-Blue--2)",
-      slot_button_bg: "var(--Dental-Light-Blue--1)",
-      slot_button_hover_bg: "var(--Dental-Light-Blue-0)",
-      /* End Slot grid colors */
-
-      other_locations_banner_bg: "var(--Light-Gum--1)",
-      other_locations_bg: "var(--Dental-Air-0)",
-
-      /* To be checked the validity of these colors */
-      "border-color": "var(--Dental-Blue-0)",
-      font_color: "!text-[var(--Dental-Blue-1)]",
-      font_color_title: "!text-[var(--Dental-Blue-0)]",
-      btn_bg: "var(--Dental-Blue-0)",
-      "border-b": "border-b-[var(--Dental-Blue-0)]",
-      font_color_code: "var(--Dental-Blue-1)",
-      font_color_title_code: "var(--Dental-Blue-0)",
-      "slot-bg": "var(--Dental-Light-Blue--1)",
-      "slot-text": "var(--Dental-Blue-0)",
-      bg_0: "bg-[var(--Dental-Light-Blue--3)]",
-      bg_logo_fill_color: "white",
-      button_rounded: "lg",
-      bg_card_title: "bg-[var(--Dental-Blue--1)]",
-      "divider-color": "divide-[var(--Dental-Blue-0)]",
-      /* End Colors*/
-
-      /* Domain */
-      domain: domainValue,
-    };
-  }
-};
-
-let siteColors: any = getColorsForDomain(domain.value);
-
-// Set CSS variables on document root so base.css can use them
-// This ensures that teleported content (Dialog/Modal) also inherits these colors
-if (typeof document !== 'undefined') {
-  const root = document.documentElement;
-
-  // Primary color (fallback)
-  root.style.setProperty('--primary-color', siteColors["primary-color"]);
-
-  // Heading colors - h1 and h2 use title color, h3-h6 use regular color
-  root.style.setProperty('--h1-color', siteColors['font_color_title_code']);
-  root.style.setProperty('--h2-color', siteColors['font_color_title_code']);
-  root.style.setProperty('--h3-color', siteColors['font_color_code']);
-  root.style.setProperty('--h4-color', siteColors['font_color_code']);
-  root.style.setProperty('--h5-color', siteColors['font_color_code']);
-  root.style.setProperty('--h6-color', siteColors['font_color_code']);
-
-  // Paragraph color
-  root.style.setProperty('--p-color', siteColors['font_color_code']);
-
-  // Input colors
-  root.style.setProperty('--input-default-border', siteColors['input_default_border']);
-  root.style.setProperty('--input-default-bg', siteColors['input_default_bg']);
-  root.style.setProperty('--input-default-icon-color', siteColors['input_default_icon_color']);
-  root.style.setProperty('--input-default-text', siteColors['input_default_text']);
-
-  root.style.setProperty('--input-active-border', siteColors['input_active_border']);
-  root.style.setProperty('--input-active-bg', siteColors['input_active_bg']);
-  root.style.setProperty('--input-active-icon-color', siteColors['input_active_icon_color']);
-  root.style.setProperty('--input-active-text', siteColors['input_active_text']);
-
-  root.style.setProperty('--input-focused-border', siteColors['input_focused_border']);
-  root.style.setProperty('--input-focused-bg', siteColors['input_focused_bg']);
-  root.style.setProperty('--input-focused-icon-color', siteColors['input_focused_icon_color']);
-  root.style.setProperty('--input-focused-text', siteColors['input_focused_text']);
-
-  root.style.setProperty('--input-disabled-border', siteColors['input_disabled_border']);
-  root.style.setProperty('--input-disabled-bg', siteColors['input_disabled_bg']);
-  root.style.setProperty('--input-disabled-icon-color', siteColors['input_disabled_icon_color']);
-  root.style.setProperty('--input-disabled-text', siteColors['input_disabled_text']);
-
-  root.style.setProperty('--input-error-border', siteColors['input_error_border']);
-  root.style.setProperty('--input-error-bg', siteColors['input_error_bg']);
-  root.style.setProperty('--input-error-icon-color', siteColors['input_error_icon_color']);
-  root.style.setProperty('--input-error-text', siteColors['input_error_text']);
-
-  root.style.setProperty('--input-success-border', siteColors['input_success_border']);
-  root.style.setProperty('--input-success-bg', siteColors['input_success_bg']);
-  root.style.setProperty('--input-success-icon-color', siteColors['input_success_icon_color']);
-  root.style.setProperty('--input-success-text', siteColors['input_success_text']);
-
-  root.style.setProperty('--input-warning-border', siteColors['input_warning_border']);
-  root.style.setProperty('--input-warning-bg', siteColors['input_warning_bg']);
-  root.style.setProperty('--input-warning-icon-color', siteColors['input_warning_icon_color']);
-  root.style.setProperty('--input-warning-text', siteColors['input_warning_text']);
-
-  // Accordion colors
-  root.style.setProperty('--accordion-headline-color', siteColors['accordion_headline_color']);
-  root.style.setProperty('--accordion-title-color', siteColors['accordion_title_color']);
-  root.style.setProperty('--accordion-content-color', siteColors['accordion_content_color']);
-  root.style.setProperty('--accordion-divider-color', siteColors['accordion_divider_color']);
-  root.style.setProperty('--accordion-icon-color', siteColors['accordion_icon_color']);
-
-  // Appointment card colors
-  root.style.setProperty('--appointment_card_header_default_bg', siteColors['appointment_card_header_default_bg']);
-  root.style.setProperty('--appointment_card_header_text', siteColors['appointment_card_header_text']);
-  root.style.setProperty('--appointment_card_default_bg', siteColors['appointment_card_default_bg']);
-  root.style.setProperty('--appointment_card_title', siteColors['appointment_card_title']);
-  root.style.setProperty('--appointment_card_text', siteColors['appointment_card_text']);
-  root.style.setProperty('--appointment_card_delimiter', siteColors['appointment_card_delimiter']);
-
-  // Progress bar colors
-  root.style.setProperty('--progress-bar-bg', siteColors['progress_bar_bg']);
-  root.style.setProperty('--progress-bar-fill', siteColors['progress_bar_fill']);
-
-  // Navigation colors
-  root.style.setProperty('--nav-bg', siteColors['nav_bg']);
-  root.style.setProperty('--nav-item-active-bg', siteColors['nav_item_active_bg']);
-  root.style.setProperty('--nav-item-text', siteColors['nav_item_text']);
-  root.style.setProperty('--nav-item-icon', siteColors['nav_item_icon']);
-
-  // Toggle colors
-  root.style.setProperty('--toggle-inactive-bg', siteColors['toggle_inactive_bg']);
-  root.style.setProperty('--toggle-active-bg', siteColors['toggle_active_bg']);
-  root.style.setProperty('--toggle-text', siteColors['toggle_text']);
-
-  // Loader colors
-  root.style.setProperty('--loader-fill', siteColors['loader_fill']);
-  root.style.setProperty('--loader-text', siteColors['loader_text']);
-
-  // Focus colors
-  root.style.setProperty('--focus-ring-color', siteColors['focus_ring_color']);
-
-  // Card/List item colors
-  root.style.setProperty('--card-bg', siteColors['card_bg']);
-  root.style.setProperty('--card-hover-bg', siteColors['card_hover_bg']);
-  root.style.setProperty('--card-border', siteColors['card_border']);
-  root.style.setProperty('--card-divider', siteColors['card_divider']);
-
-  // Tile colors
-  root.style.setProperty('--tile-bg', siteColors['tile_bg']);
-  root.style.setProperty('--tile-border', siteColors['tile_border']);
-  root.style.setProperty('--tile-hover-bg', siteColors['tile_hover_bg']);
-  root.style.setProperty('--tile-pressed-bg', siteColors['tile_pressed_bg']);
-  root.style.setProperty('--tile-title-color', siteColors['tile_title_color']);
-  root.style.setProperty('--tile-description-color', siteColors['tile_description_color']);
-  root.style.setProperty('--tile-label-text-color', siteColors['tile_label_text_color']);
-  root.style.setProperty('--tile-label-bg', siteColors['tile_label_bg']);
-  root.style.setProperty('--tile-icon-color', siteColors['tile_icon_color']);
-  root.style.setProperty('--tile-focus-ring', siteColors['tile_focus_ring']);
-  root.style.setProperty('--tile-disabled-border', siteColors['tile_disabled_border']);
-
-  // Status badge colors
-  root.style.setProperty('--badge-available-border', siteColors['badge_available_border']);
-  root.style.setProperty('--badge-available-text', siteColors['badge_available_text']);
-  root.style.setProperty('--badge-available-subtext', siteColors['badge_available_subtext']);
-  root.style.setProperty('--badge-unavailable-border', siteColors['badge_unavailable_border']);
-  root.style.setProperty('--badge-unavailable-text', siteColors['badge_unavailable_text']);
-  root.style.setProperty('--badge-unavailable-subtext', siteColors['badge_unavailable_subtext']);
-
-  // Page state colors
-  root.style.setProperty('--state-success-title', siteColors['state_success_title']);
-  root.style.setProperty('--state-error-title', siteColors['state_error_title']);
-  root.style.setProperty('--state-info-icon', siteColors['state_info_icon']);
-  root.style.setProperty('--state-info-text', siteColors['state_info_text']);
-
-  // Destructive action colors
-  root.style.setProperty('--action-destructive-icon', siteColors['action_destructive_icon']);
-  root.style.setProperty('--action-destructive-text', siteColors['action_destructive_text']);
-
-  // Background colors
-  root.style.setProperty('--page-bg', siteColors['page_bg']);
-  root.style.setProperty('--section-bg', siteColors['section_bg']);
-
-  // Primary text and icon colors
-  root.style.setProperty('--icon-primary', siteColors['icon_primary']);
-  root.style.setProperty('--text-primary', siteColors['text_primary']);
-  root.style.setProperty('--text-secondary', siteColors['text_secondary']);
-  root.style.setProperty('--divider-primary', siteColors['divider_primary']);
-  root.style.setProperty('--border-primary', siteColors['border_primary']);
-
-  // Slot grid colors
-  root.style.setProperty('--slot-header-bg', siteColors['slot_header_bg']);
-  root.style.setProperty('--slot-button-bg', siteColors['slot_button_bg']);
-  root.style.setProperty('--slot-button-hover-bg', siteColors['slot_button_hover_bg']);
-
-  root.style.setProperty('--other-locations-banner-bg', siteColors['other_locations_banner_bg']);
-  root.style.setProperty('--other-locations-bg', siteColors['other_locations_bg']);
-}
-
-// Function to set domain for testing purposes
-const setTestingDomain = (newDomain: 'domain-cocoon' | 'domain-dental') => {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem('testDomain', newDomain);
-    window.location.reload();
-  }
-};
-
-// Function to clear testing override
-const clearTestingDomain = () => {
-  if (typeof window !== 'undefined') {
-    localStorage.removeItem('testDomain');
-    window.location.reload();
-  }
-};
-
-export {
-  siteColors,
-  getDomainName,
-  appointmentTypes,
-  domain,
-  setTestingDomain,
-  clearTestingDomain,
-  getColorsForDomain
-};
-
-// Anamnese utilities
+import { se } from "date-fns/locale";
+import { ref } from "vue";
+
+const appointmentTypes = [
+  {
+    id: 0,
+    icon: 'simple',
+    title: 'Simple',
+    content: '1 Patient <br>1 Behandler <br>1 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: "hidden"
+  },
+  {
+    id: 1,
+    icon: 'multitermin',
+    title: 'Multitermin',
+    content: '1 Patient <br>1 Behandler <br>2 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+  {
+    id: 2,
+    icon: 'supervision',
+    title: 'Supervision',
+    content: '1 Patient <br>2 Behandler <br> 1 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+  {
+    id: 3,
+    icon: 'doppeltermin',
+    title: 'Doppeltermin',
+    content: '2 Patienten <br> 1 Behandler <br> 1 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+  {
+    id: 4,
+    icon: 'kombitermin',
+    title: 'Kombitermin',
+    content: '1 Patient <br> 2 Behandler <br> 2 Behandlungen',
+    description: 'Hier steht Text zu der Termin option die ungefähr so lang ist.',
+    additionalClass: ""
+  },
+];
+
+const getDomainName = () => {
+  const host = window.location.hostname;
+  const m = host.match(/([^.]+)\.app/);
+  return m?.[1] ?? null;
+}
+
+const generateDynamicDomain = () => {
+  const protocol = window.location.protocol; // e.g., "http:"
+  const host = window.location.host; // e.g., "localhost:3000"
+  return `${protocol}//${host}`; // Combine protocol and host
+};
+
+// Check for testing override in localStorage or URL parameter
+const getTestingDomainOverride = () => {
+  // Check URL parameter first
+  if (typeof window !== 'undefined') {
+    const urlParams = new URLSearchParams(window.location.search);
+    const urlDomain = urlParams.get('testDomain');
+    if (urlDomain === 'domain-cocoon' || urlDomain === 'domain-dental') {
+      return urlDomain;
+    }
+
+    // Check localStorage second
+    const storedDomain = localStorage.getItem('testDomain');
+    if (storedDomain === 'domain-cocoon' || storedDomain === 'domain-dental') {
+      return storedDomain;
+    }
+  }
+  return null;
+};
+
+const domain: any = ref(null);
+const testingOverride = getTestingDomainOverride();
+
+if (testingOverride) {
+  // Use testing override if available
+  domain.value = testingOverride;
+} else {
+  // Use actual domain detection
+  const currentDomain = generateDynamicDomain().toLowerCase();
+  if (currentDomain.includes("white-cocoon")) {
+    domain.value = "domain-cocoon";
+  } else {
+    domain.value = "domain-dental";
+  }
+}
+
+// Function to get colors for a specific domain
+const getColorsForDomain = (domainValue: string) => {
+  if (domainValue === "domain-cocoon") {
+    return {
+      "primary-color": "var(--Dark-Nude-2)",
+
+      /* Button colors */
+      button_default_bg: "var(--Dark-Nude-2)",
+      button_pressed_bg: "var(--Dark-Nude-3)",
+      button_hovered_bg: "var(--Night-Nude--1)",
+      button_disabled_bg: "var(--Night-Nude--3)",
+      button_default_text: "var(--White-0)",
+
+      button_outline_border: "var(--Dark-Nude-3)",
+      button_outline_pressed_bg: "var(--Dark-Nude-2)",
+      button_outline_hovered_bg: "var(--Night-Nude-2)",
+      button_outline_hovered_border: "var(--Night-Nude-2)",
+      button_outline_disabled_border: "var(--Night-Nude--1)",
+      button_outline_default_text: "var(--Dark-Nude-3)",
+      button_outline_disabled_text: "var(--Night-Nude--1)",
+      /* End button colors */
+
+      /* Checkbox colors */
+      checkbox_default_text: "var(--Dark-Nude-3)",
+
+      checkbox_defaut_border: "var(--Night-Nude--2)",
+      checkbox_default_bg: "var(--White-0)",
+
+      checkbox_hovered_border: "var(--Dark-Nude-2)",
+      checkbox_hovered_bg: "var(--Warm-Light--2)",
+
+      checkbox_checked_border: "var(--Night-Nude-0)",
+      checkbox_checked_bg: "var(--White-0)",
+
+      checkbox_error_border: "var(--Error-Red-0)",
+      checkbox_error_bg: "var(--Light-Gum--3)",
+      checkbox_error_text: "var(--Error-Red-0)",
+
+      checkbox_success_border: "var(--Success-Green-0)",
+      checkbox_success_bg: "var(--Success-Green--1)",
+      checkbox_success_text: "var(--Success-Green-1)",
+
+      checkbox_disabled_border: "var(--Night-Nude--1)",
+      checkbox_disabled_bg: "var(--White-0)",
+      checkbox_disabled_text: "var(--Night-Nude--1)",
+
+      checkbox_default_checkmark: "var(--Night-Nude-0)",
+      checkbox_hovered_checkmark: "var(--Night-Nude-2)",
+      checkbox_error_checkmark: "var(--Error-Red-0)",
+      checkbox_success_checkmark: "var(--Success-Green-0)",
+      checkbox_disabled_checkmark: "var(--Night-Nude--1)",
+      /* End checkbox colors */
+
+      /* Logo colors */
+      logo_primary_fill: "var(--Dark-Nude-2)",
+      /* End logo colors */
+
+      /* Input colors */
+      input_default_border: "var(--Dark-Nude--2)",
+      input_default_bg: "var(--Light-Nude--4)",
+      input_default_icon_color: "var(--Dark-Nude-2)",
+      input_default_text: "var(--Dark-Nude-0)",
+
+      input_active_border: "var(--Dark-Nude--2)",
+      input_active_bg: "var(--Light-Nude--4)",
+      input_active_icon_color: "var(--Dark-Nude-2)",
+      input_active_text: "var(--Dark-Nude-3)",
+
+      input_focused_border: "var(--Dark-Nude-2)",
+      input_focused_bg: "var(--White-0)",
+      input_focused_icon_color: "var(--Dark-Nude-2)",
+      input_focused_text: "var(--Dark-Nude-2)",
+
+      input_disabled_border: "var(--Dark-Nude-0)",
+      input_disabled_bg: "var(--Light-Nude--4)",
+      input_disabled_icon_color: "var(--Dark-Nude-0)",
+      input_disabled_text: "var(--Dark-Nude-0)",
+
+      input_error_border: "var(--Error-Red-0)",
+      input_error_bg: "var(--Light-Gum--3)",
+      input_error_icon_color: "var(--Error-Red-0)",
+      input_error_text: "var(--Error-Red-0)",
+
+      input_success_border: "var(--Success-Green-0)",
+      input_success_bg: "var(--Success-Green--1)",
+      input_success_icon_color: "var(--Success-Green-1)",
+      input_success_text: "var(--Success-Green-1)",
+
+      input_warning_border: "var(--Warning-Yellow-0)",
+      input_warning_bg: "var(--Warm-Light--2)",
+      input_warning_icon_color: "var(--Warm-Light-3)",
+      input_warning_text: "var(--Dark-Nude-3)",
+      /* End input colors */
+
+      /* Select Item colors */
+      select_item_text: "var(--Night-Nude-2)",
+      select_item_default_bg: "var(--White-0)",
+      select_item_hovered_bg: "var(--Dark-Nude--3)",
+      select_item_selected_left_border: "var(--Night-Nude-2)",
+      select_item_selected_bg: "var(--White-0)",
+      /* End Select Item colors */
+
+      /* Accordion colors */
+      accordion_headline_color: "var(--Dark-Nude-2)",
+      accordion_title_color: "var(--Dark-Nude-2)",
+      accordion_content_color: "var(--Dark-Nude-3)",
+      accordion_divider_color: "var(--Night-Nude--2)",
+      accordion_icon_color: "var(--Dark-Nude-2)",
+      /* End Accordion colors */
+
+      /* Appointment card colors */
+      appointment_card_header_default_bg: "var(--Dark-Nude--3)",
+      appointment_card_header_text: "var(--Dark-Nude-3)",
+      appointment_card_default_bg: "var(--White-0)",
+      appointment_card_title: "var(--Dark-Nude-3)",
+      appointment_card_text: "var(--Dark-Nude-2)",
+      appointment_card_delimiter: "var(--Night-Nude--2)",
+      /* End Appointment card colors */
+
+      /* Progress bar colors */
+      progress_bar_bg: "var(--Night-Nude--3)",
+      progress_bar_fill: "var(--Dark-Nude-0)",
+      /* End Progress bar colors */
+
+      /* Navigation colors */
+      nav_bg: "var(--Warm-Air--4)",
+      nav_item_active_bg: "var(--Dark-Nude--2)",
+      nav_item_text: "var(--Dark-Nude-2)",
+      nav_item_icon: "var(--Dark-Nude-2)",
+      /* End Navigation colors */
+
+      /* Toggle colors */
+      toggle_inactive_bg: "var(--Night-Nude--2)",
+      toggle_active_bg: "var(--Dark-Nude-2)",
+      toggle_text: "var(--Dark-Nude-2)",
+      /* End Toggle colors */
+
+      /* Loader colors */
+      loader_fill: "var(--Dark-Nude-2)",
+      loader_text: "var(--Dark-Nude-2)",
+      /* End Loader colors */
+
+      /* Focus colors */
+      focus_ring_color: "var(--Dark-Nude-2)",
+      /* End Focus colors */
+
+      /* Card/List item colors */
+      card_bg: "var(--White-0)",
+      card_hover_bg: "var(--Dark-Nude--3)",
+      card_border: "var(--Night-Nude--2)",
+      card_divider: "var(--Night-Nude--2)",
+      /* End Card/List item colors */
+
+      /* Tile colors */
+      tile_bg: "var(--White-0)",
+      tile_border: "var(--Dark-Nude--2)",
+      tile_hover_bg: "var(--Dark-Nude--4)",
+      tile_pressed_bg: "var(--Dark-Nude--3)",
+      tile_title_color: "var(--Dark-Nude-3)",
+      tile_description_color: "var(--Dark-Nude-3)",
+      tile_label_text_color: "var(--Dark-Nude-3)",
+      tile_label_bg: "var(--Dark-Nude--2)",
+      tile_icon_color: "var(--Dark-Nude-3)",
+      tile_focus_ring: "var(--Dark-Nude-2)",
+      tile_disabled_border: "var(--Night-Nude--2)",
+      /* End Tile colors */
+
+      /* Status badge colors */
+      badge_available_border: "var(--Success-Green-0)",
+      badge_available_text: "var(--Success-Green-0)",
+      badge_available_subtext: "var(--Success-Green-1)",
+      badge_unavailable_border: "var(--Error-Red-1)",
+      badge_unavailable_text: "var(--Error-Red-0)",
+      badge_unavailable_subtext: "var(--Error-Red-1)",
+      /* End Status badge colors */
+
+      /* Page state colors */
+      state_success_title: "var(--Success-Green-0)",
+      state_error_title: "var(--Error-Red-0)",
+      state_info_icon: "var(--Dark-Nude-2)",
+      state_info_text: "var(--Dark-Nude-2)",
+      /* End Page state colors */
+
+      /* Destructive action colors */
+      action_destructive_icon: "var(--Power-Red-0)",
+      action_destructive_text: "var(--Power-Red-0)",
+      /* End Destructive action colors */
+
+      /* Background colors */
+      page_bg: "var(--Warm-Air--4)",
+      section_bg: "var(--White-0)",
+      /* End Background colors */
+
+      /* Primary text and icon colors */
+      icon_primary: "var(--Dark-Nude-2)",
+      text_primary: "var(--Dark-Nude-2)",
+      text_secondary: "var(--Dark-Nude-3)",
+      divider_primary: "var(--Night-Nude--2)",
+      border_primary: "var(--Dark-Nude-0)",
+      /* End Primary text and icon colors */
+
+      /* Slot grid colors */
+      slot_header_bg: "var(--Night-Nude--3)",
+      slot_button_bg: "var(--Warm-Air--4)",
+      slot_button_hover_bg: "var(--Night-Nude--2)",
+      /* End Slot grid colors */
+
+      other_locations_banner_bg: "var(--Dark-Nude--3)",
+      other_locations_bg: "var(--Night-Nude-2)",
+
+      /* To be checked the validity of these colors */
+      font_color: "!text-[var(--Dark-Nude-3)]",
+      font_color_title: "!text-[var(--Dark-Nude-2)]",
+      font_color_code: "var(--Dark-Nude-3)",
+      font_color_title_code: "var(--Dark-Nude-2)",
+      "border-b": "border-b-[var(--Night-Nude-0)]",
+      bg_0: "bg-[var(--Warm-Air--4)]",
+      font_family: "font-['arial']",
+      btn_bg: "var(--Dark-Nude-2)",
+      "border-color": "var(--Dark-Nude-0)",
+      "slot-bg": "var(--Light-Nude-0)",
+      "slot-text": "var(--Dark-Nude-3)",
+      "divider-color": "divide-[var(--Dark-Nude-0)]",
+      bg_logo_fill_color: "var(--Warm-Air--3)",
+      bg_card_title: "bg-[var(--Dark-Nude--3)]",
+      button_rounded: "0",
+      /* End Colors*/
+
+      /* Domain */
+      domain: domainValue,
+    };
+  } else {
+    return {
+      "primary-color": "var(--Dental-Blue-0)",
+
+      /* Button colors */
+      button_default_bg: "var(--Dental-Blue-0)",
+      button_pressed_bg: "var(--Dental-Blue-1)",
+      button_hovered_bg: "var(--Dental-Blue--1)",
+      button_disabled_bg: "var(--Soft-Concrete-1)",
+      button_default_text: "var(--White-0)",
+
+      button_outline_border: "var(--Dental-Blue-0)",
+      button_outline_pressed_bg: "var(--Dental-Blue--5)",
+      button_outline_hovered_bg: "var(--Dental-Blue--6)",
+      button_outline_hovered_border: "var(--Dental-Blue-0)",
+      button_outline_disabled_border: "var(--Soft-Concrete-2)",
+      button_outline_default_text: "var(--Dental-Blue-0)",
+      button_outline_disabled_text: "var(--Soft-Concrete-2)",
+      /* End button colors */
+
+      /* Checkbox colors */
+      checkbox_default_text: "var(--Dental-Blue-0)",
+
+      checkbox_defaut_border: "var(--Soft-Concrete-2)",
+      checkbox_default_bg: "var(--White-0)",
+
+      checkbox_hovered_border: "var(--Dental-Blue--1)",
+      checkbox_hovered_bg: "var(--Dental-Light-Blue--2)",
+
+      checkbox_checked_border: "var(--Dental-Blue-0)",
+      checkbox_checked_bg: "var(--White-0)",
+
+      checkbox_error_border: "var(--Error-Red-0)",
+      checkbox_error_bg: "var(--Light-Gum--3)",
+      checkbox_error_text: "var(--Error-Red-0)",
+
+      checkbox_success_border: "var(--Success-Green-0)",
+      checkbox_success_bg: "var(--Success-Green--1)",
+      checkbox_success_text: "var(--Success-Green-1)",
+
+      checkbox_disabled_border: "var(--Soft-Concrete-2)",
+      checkbox_disabled_bg: "var(--White-0)",
+      checkbox_disabled_text: "var(--Soft-Concrete-2)",
+
+      checkbox_default_checkmark: "var(--Dental-Blue-0)",
+      checkbox_hovered_checkmark: "var(--Dental-Blue--1)",
+      checkbox_error_checkmark: "var(--Error-Red-0)",
+      checkbox_success_checkmark: "var(--Success-Green-0)",
+      checkbox_disabled_checkmark: "var(--Soft-Concrete-2)",
+      /* End checkbox colors */
+
+      /* Logo colors */
+      logo_primary_fill: "var(--Dental-Blue-0)",
+      /* End logo colors */
+
+      /* Input colors */
+      input_default_border: "var(--Soft-Concrete-1)",
+      input_default_bg: "var(--White-0)",
+      input_default_icon_color: "var(--Dental-Blue-0)",
+      input_default_text: "var(--Dental-Blue--2)",
+
+      input_active_border: "var(--Soft-Concrete-1)",
+      input_active_bg: "var(--White-0)",
+      input_active_icon_color: "var(--Dental-Blue-0)",
+      input_active_text: "var(--Dental-Blue-0)",
+
+      input_focused_border: "var(--Dental-Light-Blue-1)",
+      input_focused_bg: "var(--White-0)",
+      input_focused_icon_color: "var(--Dental-Blue-0)",
+      input_focused_text: "var(--Dental-Blue-0)",
+
+      input_disabled_border: "var(--Soft-Concrete-1)",
+      input_disabled_bg: "var(--White-0)",
+      input_disabled_icon_color: "var(--Soft-Concrete-1)",
+      input_disabled_text: "var(--Soft-Concrete-1)",
+
+      input_error_border: "var(--Error-Red-0)",
+      input_error_bg: "var(--Light-Gum--3)",
+      input_error_icon_color: "var(--Error-Red-0)",
+      input_error_text: "var(--Error-Red-0)",
+
+      input_success_border: "var(--Success-Green-0)",
+      input_success_bg: "var(--Success-Green--1)",
+      input_success_icon_color: "var(--Success-Green-1)",
+      input_success_text: "var(--Success-Green-1)",
+
+      input_warning_border: "var(--Warning-Yellow-0)",
+      input_warning_bg: "var(--Warm-Light--2)",
+      input_warning_icon_color: "var(--Warm-Light-3)",
+      input_warning_text: "var(--Warm-Light-3)",
+      /* End input colors */
+
+      /* Select Item colors */
+      select_item_text: "var(--Dental-Blue-0)",
+      select_item_default_bg: "var(--White-0)",
+      select_item_hovered_bg: "var(--Soft-Concrete-1)",
+      select_item_selected_left_border: "var(--Dental-Blue-0)",
+      select_item_selected_bg: "var(--White-0)",
+      /* End Select Item colors */
+
+      /* Accordion colors */
+      accordion_headline_color: "var(--Dental-Blue-0)",
+      accordion_title_color: "var(--Dental-Blue-0)",
+      accordion_content_color: "var(--Dental-Blue-0)",
+      accordion_divider_color: "var(--Soft-Concrete-1)",
+      accordion_icon_color: "var(--Dental-Blue-0)",
+      /* End Accordion colors */
+
+      /* Appointment card colors */
+      appointment_card_header_default_bg: "var(--Dental-Light-Blue--1)",
+      appointment_card_header_text: "var(--Dental-Blue-0)",
+      appointment_card_default_bg: "var(--White-0)",
+      appointment_card_title: "var(--Dental-Blue-0)",
+      appointment_card_text: "var(--Dental-Blue--2)",
+      appointment_card_delimiter: "var(--Soft-Concrete-1)",
+      /* End Appointment card colors */
+
+      /* Progress bar colors */
+      progress_bar_bg: "var(--Soft-Concrete-0)",
+      progress_bar_fill: "var(--Dental-Light-Blue-0)",
+      /* End Progress bar colors */
+
+      /* Navigation colors */
+      nav_bg: "var(--Dental-Light-Blue--3)",
+      nav_item_active_bg: "var(--Dental-Light-Blue-1)",
+      nav_item_text: "var(--Dental-Blue-0)",
+      nav_item_icon: "var(--Dental-Blue-0)",
+      /* End Navigation colors */
+
+      /* Toggle colors */
+      toggle_inactive_bg: "var(--Dental-Blue--5)",
+      toggle_active_bg: "var(--Dental-Blue-0)",
+      toggle_text: "var(--Dental-Blue-0)",
+      /* End Toggle colors */
+
+      /* Loader colors */
+      loader_fill: "var(--Dental-Blue-0)",
+      loader_text: "var(--Dental-Blue-0)",
+      /* End Loader colors */
+
+      /* Focus colors */
+      focus_ring_color: "var(--Dental-Blue-0)",
+      /* End Focus colors */
+
+      /* Card/List item colors */
+      card_bg: "var(--White-0)",
+      card_hover_bg: "var(--Dental-Blue--6)",
+      card_border: "var(--Soft-Concrete-1)",
+      card_divider: "var(--Dental-Blue--4)",
+      /* End Card/List item colors */
+
+      /* Tile colors */
+      tile_bg: "var(--White-0)",
+      tile_border: "var(--Soft-Concrete-2)",
+      tile_hover_bg: "var(--Dental-Blue--6)",
+      tile_pressed_bg: "var(--Dental-Blue--5)",
+      tile_title_color: "var(--Dental-Blue-0)",
+      tile_description_color: "var(--Dental-Blue-0)",
+      tile_label_text_color: "var(--Dental-Blue-0)",
+      tile_label_bg: "var(--Dental-Light-Blue-0)",
+      tile_icon_color: "var(--Dental-Blue-0)",
+      tile_focus_ring: "var(--Dental-Blue-0)",
+      tile_disabled_border: "var(--Soft-Concrete-2)",
+      /* End Tile colors */
+
+      /* Status badge colors */
+      badge_available_border: "var(--Success-Green-0)",
+      badge_available_text: "var(--Success-Green-0)",
+      badge_available_subtext: "var(--Success-Green-1)",
+      badge_unavailable_border: "var(--Error-Red-1)",
+      badge_unavailable_text: "var(--Error-Red-0)",
+      badge_unavailable_subtext: "var(--Error-Red-1)",
+      /* End Status badge colors */
+
+      /* Page state colors */
+      state_success_title: "var(--Success-Green-0)",
+      state_error_title: "var(--Error-Red-0)",
+      state_info_icon: "var(--Dental-Blue-0)",
+      state_info_text: "var(--Dental-Blue-0)",
+      /* End Page state colors */
+
+      /* Destructive action colors */
+      action_destructive_icon: "var(--Power-Red-0)",
+      action_destructive_text: "var(--Power-Red-0)",
+      /* End Destructive action colors */
+
+      /* Background colors */
+      page_bg: "var(--Dental-Light-Blue--3)",
+      section_bg: "var(--White-0)",
+      /* End Background colors */
+
+      /* Primary text and icon colors */
+      icon_primary: "var(--Dental-Blue-0)",
+      text_primary: "var(--Dental-Blue-0)",
+      text_secondary: "var(--Dental-Blue--2)",
+      divider_primary: "var(--Dental-Blue--4)",
+      border_primary: "var(--Dental-Blue-0)",
+      /* End Primary text and icon colors */
+
+      /* Slot grid colors */
+      slot_header_bg: "var(--Dental-Light-Blue--2)",
+      slot_button_bg: "var(--Dental-Light-Blue--1)",
+      slot_button_hover_bg: "var(--Dental-Light-Blue-0)",
+      /* End Slot grid colors */
+
+      other_locations_banner_bg: "var(--Light-Gum--1)",
+      other_locations_bg: "var(--Dental-Air-0)",
+
+      /* To be checked the validity of these colors */
+      "border-color": "var(--Dental-Blue-0)",
+      font_color: "!text-[var(--Dental-Blue-1)]",
+      font_color_title: "!text-[var(--Dental-Blue-0)]",
+      btn_bg: "var(--Dental-Blue-0)",
+      "border-b": "border-b-[var(--Dental-Blue-0)]",
+      font_color_code: "var(--Dental-Blue-1)",
+      font_color_title_code: "var(--Dental-Blue-0)",
+      "slot-bg": "var(--Dental-Light-Blue--1)",
+      "slot-text": "var(--Dental-Blue-0)",
+      bg_0: "bg-[var(--Dental-Light-Blue--3)]",
+      bg_logo_fill_color: "white",
+      button_rounded: "lg",
+      bg_card_title: "bg-[var(--Dental-Blue--1)]",
+      "divider-color": "divide-[var(--Dental-Blue-0)]",
+      /* End Colors*/
+
+      /* Domain */
+      domain: domainValue,
+    };
+  }
+};
+
+let siteColors: any = getColorsForDomain(domain.value);
+
+// Set CSS variables on document root so base.css can use them
+// This ensures that teleported content (Dialog/Modal) also inherits these colors
+if (typeof document !== 'undefined') {
+  const root = document.documentElement;
+
+  // Primary color (fallback)
+  root.style.setProperty('--primary-color', siteColors["primary-color"]);
+
+  // Heading colors - h1 and h2 use title color, h3-h6 use regular color
+  root.style.setProperty('--h1-color', siteColors['font_color_title_code']);
+  root.style.setProperty('--h2-color', siteColors['font_color_title_code']);
+  root.style.setProperty('--h3-color', siteColors['font_color_code']);
+  root.style.setProperty('--h4-color', siteColors['font_color_code']);
+  root.style.setProperty('--h5-color', siteColors['font_color_code']);
+  root.style.setProperty('--h6-color', siteColors['font_color_code']);
+
+  // Paragraph color
+  root.style.setProperty('--p-color', siteColors['font_color_code']);
+
+  // Input colors
+  root.style.setProperty('--input-default-border', siteColors['input_default_border']);
+  root.style.setProperty('--input-default-bg', siteColors['input_default_bg']);
+  root.style.setProperty('--input-default-icon-color', siteColors['input_default_icon_color']);
+  root.style.setProperty('--input-default-text', siteColors['input_default_text']);
+
+  root.style.setProperty('--input-active-border', siteColors['input_active_border']);
+  root.style.setProperty('--input-active-bg', siteColors['input_active_bg']);
+  root.style.setProperty('--input-active-icon-color', siteColors['input_active_icon_color']);
+  root.style.setProperty('--input-active-text', siteColors['input_active_text']);
+
+  root.style.setProperty('--input-focused-border', siteColors['input_focused_border']);
+  root.style.setProperty('--input-focused-bg', siteColors['input_focused_bg']);
+  root.style.setProperty('--input-focused-icon-color', siteColors['input_focused_icon_color']);
+  root.style.setProperty('--input-focused-text', siteColors['input_focused_text']);
+
+  root.style.setProperty('--input-disabled-border', siteColors['input_disabled_border']);
+  root.style.setProperty('--input-disabled-bg', siteColors['input_disabled_bg']);
+  root.style.setProperty('--input-disabled-icon-color', siteColors['input_disabled_icon_color']);
+  root.style.setProperty('--input-disabled-text', siteColors['input_disabled_text']);
+
+  root.style.setProperty('--input-error-border', siteColors['input_error_border']);
+  root.style.setProperty('--input-error-bg', siteColors['input_error_bg']);
+  root.style.setProperty('--input-error-icon-color', siteColors['input_error_icon_color']);
+  root.style.setProperty('--input-error-text', siteColors['input_error_text']);
+
+  root.style.setProperty('--input-success-border', siteColors['input_success_border']);
+  root.style.setProperty('--input-success-bg', siteColors['input_success_bg']);
+  root.style.setProperty('--input-success-icon-color', siteColors['input_success_icon_color']);
+  root.style.setProperty('--input-success-text', siteColors['input_success_text']);
+
+  root.style.setProperty('--input-warning-border', siteColors['input_warning_border']);
+  root.style.setProperty('--input-warning-bg', siteColors['input_warning_bg']);
+  root.style.setProperty('--input-warning-icon-color', siteColors['input_warning_icon_color']);
+  root.style.setProperty('--input-warning-text', siteColors['input_warning_text']);
+
+  // Accordion colors
+  root.style.setProperty('--accordion-headline-color', siteColors['accordion_headline_color']);
+  root.style.setProperty('--accordion-title-color', siteColors['accordion_title_color']);
+  root.style.setProperty('--accordion-content-color', siteColors['accordion_content_color']);
+  root.style.setProperty('--accordion-divider-color', siteColors['accordion_divider_color']);
+  root.style.setProperty('--accordion-icon-color', siteColors['accordion_icon_color']);
+
+  // Appointment card colors
+  root.style.setProperty('--appointment_card_header_default_bg', siteColors['appointment_card_header_default_bg']);
+  root.style.setProperty('--appointment_card_header_text', siteColors['appointment_card_header_text']);
+  root.style.setProperty('--appointment_card_default_bg', siteColors['appointment_card_default_bg']);
+  root.style.setProperty('--appointment_card_title', siteColors['appointment_card_title']);
+  root.style.setProperty('--appointment_card_text', siteColors['appointment_card_text']);
+  root.style.setProperty('--appointment_card_delimiter', siteColors['appointment_card_delimiter']);
+
+  // Progress bar colors
+  root.style.setProperty('--progress-bar-bg', siteColors['progress_bar_bg']);
+  root.style.setProperty('--progress-bar-fill', siteColors['progress_bar_fill']);
+
+  // Navigation colors
+  root.style.setProperty('--nav-bg', siteColors['nav_bg']);
+  root.style.setProperty('--nav-item-active-bg', siteColors['nav_item_active_bg']);
+  root.style.setProperty('--nav-item-text', siteColors['nav_item_text']);
+  root.style.setProperty('--nav-item-icon', siteColors['nav_item_icon']);
+
+  // Toggle colors
+  root.style.setProperty('--toggle-inactive-bg', siteColors['toggle_inactive_bg']);
+  root.style.setProperty('--toggle-active-bg', siteColors['toggle_active_bg']);
+  root.style.setProperty('--toggle-text', siteColors['toggle_text']);
+
+  // Loader colors
+  root.style.setProperty('--loader-fill', siteColors['loader_fill']);
+  root.style.setProperty('--loader-text', siteColors['loader_text']);
+
+  // Focus colors
+  root.style.setProperty('--focus-ring-color', siteColors['focus_ring_color']);
+
+  // Card/List item colors
+  root.style.setProperty('--card-bg', siteColors['card_bg']);
+  root.style.setProperty('--card-hover-bg', siteColors['card_hover_bg']);
+  root.style.setProperty('--card-border', siteColors['card_border']);
+  root.style.setProperty('--card-divider', siteColors['card_divider']);
+
+  // Tile colors
+  root.style.setProperty('--tile-bg', siteColors['tile_bg']);
+  root.style.setProperty('--tile-border', siteColors['tile_border']);
+  root.style.setProperty('--tile-hover-bg', siteColors['tile_hover_bg']);
+  root.style.setProperty('--tile-pressed-bg', siteColors['tile_pressed_bg']);
+  root.style.setProperty('--tile-title-color', siteColors['tile_title_color']);
+  root.style.setProperty('--tile-description-color', siteColors['tile_description_color']);
+  root.style.setProperty('--tile-label-text-color', siteColors['tile_label_text_color']);
+  root.style.setProperty('--tile-label-bg', siteColors['tile_label_bg']);
+  root.style.setProperty('--tile-icon-color', siteColors['tile_icon_color']);
+  root.style.setProperty('--tile-focus-ring', siteColors['tile_focus_ring']);
+  root.style.setProperty('--tile-disabled-border', siteColors['tile_disabled_border']);
+
+  // Status badge colors
+  root.style.setProperty('--badge-available-border', siteColors['badge_available_border']);
+  root.style.setProperty('--badge-available-text', siteColors['badge_available_text']);
+  root.style.setProperty('--badge-available-subtext', siteColors['badge_available_subtext']);
+  root.style.setProperty('--badge-unavailable-border', siteColors['badge_unavailable_border']);
+  root.style.setProperty('--badge-unavailable-text', siteColors['badge_unavailable_text']);
+  root.style.setProperty('--badge-unavailable-subtext', siteColors['badge_unavailable_subtext']);
+
+  // Page state colors
+  root.style.setProperty('--state-success-title', siteColors['state_success_title']);
+  root.style.setProperty('--state-error-title', siteColors['state_error_title']);
+  root.style.setProperty('--state-info-icon', siteColors['state_info_icon']);
+  root.style.setProperty('--state-info-text', siteColors['state_info_text']);
+
+  // Destructive action colors
+  root.style.setProperty('--action-destructive-icon', siteColors['action_destructive_icon']);
+  root.style.setProperty('--action-destructive-text', siteColors['action_destructive_text']);
+
+  // Background colors
+  root.style.setProperty('--page-bg', siteColors['page_bg']);
+  root.style.setProperty('--section-bg', siteColors['section_bg']);
+
+  // Primary text and icon colors
+  root.style.setProperty('--icon-primary', siteColors['icon_primary']);
+  root.style.setProperty('--text-primary', siteColors['text_primary']);
+  root.style.setProperty('--text-secondary', siteColors['text_secondary']);
+  root.style.setProperty('--divider-primary', siteColors['divider_primary']);
+  root.style.setProperty('--border-primary', siteColors['border_primary']);
+
+  // Slot grid colors
+  root.style.setProperty('--slot-header-bg', siteColors['slot_header_bg']);
+  root.style.setProperty('--slot-button-bg', siteColors['slot_button_bg']);
+  root.style.setProperty('--slot-button-hover-bg', siteColors['slot_button_hover_bg']);
+
+  root.style.setProperty('--other-locations-banner-bg', siteColors['other_locations_banner_bg']);
+  root.style.setProperty('--other-locations-bg', siteColors['other_locations_bg']);
+}
+
+// Function to set domain for testing purposes
+const setTestingDomain = (newDomain: 'domain-cocoon' | 'domain-dental') => {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('testDomain', newDomain);
+    window.location.reload();
+  }
+};
+
+// Function to clear testing override
+const clearTestingDomain = () => {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem('testDomain');
+    window.location.reload();
+  }
+};
+
+export {
+  siteColors,
+  getDomainName,
+  appointmentTypes,
+  domain,
+  setTestingDomain,
+  clearTestingDomain,
+  getColorsForDomain
+};
+
+// Anamnese utilities
 export * from './anamnese';