:root {
  /* Typography */
  --font-family-base: $merriweather-font-stack;
  --line-height-base: 1.5;
  --font-weight-normal: 400;

  /* Font Sizes */
  --font-size-base-small: 0.9375rem;
  --font-size-base: 1.0625rem;
  --font-size-base-big: 1.1875rem;

  /* Header */
  --header-title-align: center;
  --header-padding: 1em 1.5em;

  /* Chat Bubble */
  --chat-bubble-radius: 0.75em;
  --chat-bubble-radius-user-bottom-right: 0.25em;
  --chat-bubble-radius-assistant-bottom-left: 0.25em;
  --chat-bubble-padding: 0.875em 1.125em;
  --chat-bubble-max-width: 85%;

  /* Avatar */
  --avatar-user-path: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjE5IiBmaWxsPSIjNmIzNzU0IiBzdHJva2U9IiM1NTI3M2UiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPHBhdGggZD0iTTIwIDEwQzE3LjIzODYgMTAgMTUgMTIuMjM4NiAxNSAxNUMxNSAxNy43NjE0IDE3LjIzODYgMjAgMjAgMjBDMjIuNzYxNCAyMCAyNSAxNy43NjE0IDI1IDE1QzI1IDEyLjIzODYgMjIuNzYxNCAxMCAyMCAxMFoiIGZpbGw9IiNmOWYzZTkiLz4KICAgIDxwYXRoIGQ9Ik0yOCAzMEMyOCAyNS41ODE3IDI0LjQxODMgMjIgMjAgMjJDMTUuNTgxNyAyMiAxMiAyNS41ODE3IDEyIDMwIiBzdHJva2U9IiNmOWYzZTkiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPg==");
  --avatar-assistant-path: url("/files/schlaraffen-freunde/assets/chat-avatar.svg");
  --avatar-size: 2.5em;
  --avatar-margin: 0.75em;
  --avatar-user-bottom: 16px;
  --avatar-assistant-bottom: 24px;
  --chat-bubble-align: flex-start;

  /* Input Container */
  --input-container-size: 1.25em;

}

/* Light Theme (default) */
[data-theme="light"] {
  /* Global Colors */
  --color-text-main: #412539;
  --color-text-placeholder: rgba(85, 60, 76, 0.7);
  --color-border: rgba(183, 147, 166, 0.3);
  --color-box-shadow-light: rgba(183, 147, 166, 0.15);

  /* Header */
  --color-header-bg: #ccc1ac;
  --color-header-title-text: #e9d5a0;

  /* Chat Container */
  --color-chat-background: linear-gradient(160deg, #f9f3e9, #f5eee3);

  /* Chat Bubbles */
  --color-user-bubble-bg: linear-gradient(120deg, #6b3754, #55273e);
  --color-user-bubble-text: #f9f3e9;
  --color-server-bubble-bg: linear-gradient(120deg, #f0e6eb, #fefefe);
  --color-server-bubble-text: #412539;
  --color-timestamp: rgba(85, 60, 76, 0.7);
  --color-teaser-bubble-bg: linear-gradient(120deg, #55273e, #412539);
  --color-teaser-bubble-text: #f9f3e9;

  /* Loading Dots */
  --color-loading-dot: rgba(85, 60, 76, 0.8);

  /* Burger Menu */
  --burger-menu-bg: rgba(249, 243, 233, 0.98);
  --burger-menu-text: #412539;
  --burger-menu-hover-bg: rgba(107, 55, 84, 0.08);
  --burger-menu-warning-text: #b93a3a;
  --burger-menu-warning-bg: rgba(185, 58, 58, 0.1);
  --burger-menu-thumb-bg: rgba(85, 60, 76, 0.8);

  /* Inputs */
  --color-input-bg: rgba(249, 243, 233, 0.98);
  --color-input-border: rgba(107, 55, 84, 0.25);
  --color-input-placeholder: rgba(85, 60, 76, 0.6);
  --color-input-container-bg: linear-gradient(135deg, #6b3754, #55273e);

  /* Buttons */
  --color-button-bg: #e9d5a0;
  --color-button-text: #412539;
  --color-button-hover-shadow: rgba(233, 213, 160, 0.4);

  /* Image Component */
  --color-image-loading-bg: #f5eee3;
  --color-image-caption-text: rgba(85, 60, 76, 0.85);
  --color-image-caption-border: rgba(183, 147, 166, 0.25);

  /* Disclaimer Bar */
  --color-disclaimer-inner-shadow: rgba(107, 55, 84, 0.1);
  --color-disclaimer-bg: #f5eee3;
  --color-disclaimer-text: rgba(85, 60, 76, 0.7);

  /* Markdown */
  --color-markdown-link: #6b3754;
  --color-markdown-link-hover: #55273e;
  --color-blockquote-border: #e9d5a0;
  --color-blockquote-bg: rgba(233, 213, 160, 0.1);
  --color-table-border: rgba(183, 147, 166, 0.3);
  --color-table-header-bg: rgba(233, 213, 160, 0.15);
  --color-markdown-code-container-bg: rgba(245, 238, 227, 0.7);

  /* AIConcierge Deep Link Pills */
  --color-aiconcierge-pill-bg: #f5eee3;
  --color-aiconcierge-pill-hover-bg: #f0e8da;
  --color-aiconcierge-pill-border: rgba(183, 147, 166, 0.25);

  /* Carousel */
  --color-carousel-item-bg: #f9f3e9;
  --color-carousel-item-shadow: rgba(183, 147, 166, 0.15);
  --color-carousel-item-title: #412539;
  --color-carousel-item-subtitle: rgba(85, 60, 76, 0.85);
  --color-carousel-item-button: #6b3754;
  --color-carousel-item-button-hover-bg: rgba(107, 55, 84, 0.08);
  --color-carousel-nav-bg: #f9f3e9;
  --color-carousel-nav-border: rgba(183, 147, 166, 0.25);
  --color-carousel-nav-shadow: rgba(183, 147, 166, 0.15);
  --color-carousel-nav-color: rgba(85, 60, 76, 0.7);
  --color-carousel-nav-hover-bg: #f5eee3;
  --color-carousel-nav-hover-shadow: rgba(183, 147, 166, 0.25);
  --color-carousel-nav-hover-color: #412539;
  --color-carousel-item-border: rgba(183, 147, 166, 0.25);

  /* Feedback Form */
  --color-feedback-input-border: rgba(183, 147, 166, 0.3);
  --color-feedback-input-border-focus: #6b3754;
  --color-feedback-input-border-invalid: #b93a3a;
  --color-feedback-submit-bg: #e9d5a0;
  --color-feedback-submit-bg-hover: #daba7d;
  --color-feedback-submit-text: #412539;
  --color-feedback-message-text: rgba(85, 60, 76, 0.85);
  --color-feedback-confirmation-text: #3c8c50;

  /* Error Message */
  --color-error: #b93a3a;
  --color-error-background: rgba(185, 58, 58, 0.1);

}

/* Dark Theme */
[data-theme="dark"] {
  /* Global Colors */
  --color-text-main: #f0e6eb;
  --color-text-placeholder: rgba(215, 200, 210, 0.7);
  --color-border: rgba(113, 77, 96, 0.3);
  --color-box-shadow-light: rgba(113, 77, 96, 0.25);

  /* Header */
  --color-header-bg: linear-gradient(135deg, #432332, #321622);
  --color-header-title-text: #daba7d;

  /* Chat Container */
  --color-chat-background: linear-gradient(160deg, #2a1a23, #241218);

  /* Chat Bubbles */
  --color-user-bubble-bg: linear-gradient(120deg, #e9d5a0, #daba7d);
  --color-user-bubble-text: #412539;
  --color-server-bubble-bg: linear-gradient(120deg, #432332, #55273e);
  --color-server-bubble-text: #f0e6eb;
  --color-timestamp: rgba(215, 200, 210, 0.7);
  --color-teaser-bubble-bg: linear-gradient(120deg, #daba7d, #c9a55f);
  --color-teaser-bubble-text: #412539;

  /* Loading Dots */
  --color-loading-dot: rgba(215, 200, 210, 0.8);

  /* Burger Menu */
  --burger-menu-bg: rgba(42, 26, 35, 0.98);
  --burger-menu-text: #f0e6eb;
  --burger-menu-hover-bg: rgba(233, 213, 160, 0.08);
  --burger-menu-warning-text: #e57373;
  --burger-menu-warning-bg: rgba(229, 115, 115, 0.1);
  --burger-menu-thumb-bg: rgba(215, 200, 210, 0.8);

  /* Inputs */
  --color-input-bg: rgba(42, 26, 35, 0.98);
  --color-input-border: rgba(183, 147, 166, 0.25);
  --color-input-placeholder: rgba(215, 200, 210, 0.6);
  --color-input-container-bg: linear-gradient(135deg, #432332, #321622);

  /* Buttons */
  --color-button-bg: #daba7d;
  --color-button-text: #2a1a23;
  --color-button-hover-shadow: rgba(218, 186, 125, 0.4);

  /* Image Component */
  --color-image-loading-bg: #2a1a23;
  --color-image-caption-text: rgba(215, 200, 210, 0.85);
  --color-image-caption-border: rgba(113, 77, 96, 0.25);

  /* Disclaimer Bar */
  --color-disclaimer-inner-shadow: rgba(0, 0, 0, 0.2);
  --color-disclaimer-bg: #1e141a;
  --color-disclaimer-text: rgba(215, 200, 210, 0.7);

  /* Markdown */
  --color-markdown-link: #b993a6;
  --color-markdown-link-hover: #cba9bb;
  --color-blockquote-border: #daba7d;
  --color-blockquote-bg: rgba(218, 186, 125, 0.1);
  --color-table-border: rgba(113, 77, 96, 0.3);
  --color-table-header-bg: rgba(218, 186, 125, 0.15);
  --color-markdown-code-container-bg: rgba(42, 26, 35, 0.7);

  /* AIConcierge Deep Link Pills */
  --color-aiconcierge-pill-bg: #2a1a23;
  --color-aiconcierge-pill-hover-bg: #321622;
  --color-aiconcierge-pill-border: rgba(113, 77, 96, 0.25);

  /* Carousel */
  --color-carousel-item-bg: #2a1a23;
  --color-carousel-item-shadow: rgba(0, 0, 0, 0.3);
  --color-carousel-item-title: #f0e6eb;
  --color-carousel-item-subtitle: rgba(215, 200, 210, 0.85);
  --color-carousel-item-button: #b993a6;
  --color-carousel-item-button-hover-bg: rgba(185, 147, 166, 0.08);
  --color-carousel-nav-bg: #2a1a23;
  --color-carousel-nav-border: rgba(113, 77, 96, 0.25);
  --color-carousel-nav-shadow: rgba(0, 0, 0, 0.3);
  --color-carousel-nav-color: rgba(215, 200, 210, 0.7);
  --color-carousel-nav-hover-bg: #321622;
  --color-carousel-nav-hover-shadow: rgba(0, 0, 0, 0.4);
  --color-carousel-nav-hover-color: #f0e6eb;
  --color-carousel-item-border: rgba(113, 77, 96, 0.25);

  /* Feedback Form */
  --color-feedback-input-border: rgba(113, 77, 96, 0.3);
  --color-feedback-input-border-focus: #b993a6;
  --color-feedback-input-border-invalid: #e57373;
  --color-feedback-submit-bg: #daba7d;
  --color-feedback-submit-bg-hover: #c9a55f;
  --color-feedback-submit-text: #2a1a23;
  --color-feedback-message-text: rgba(215, 200, 210, 0.85);
  --color-feedback-confirmation-text: #6abf7b;

  /* Error Message */
  --color-error: #e57373;
  --color-error-background: rgba(229, 115, 115, 0.1);

}