:root {
  --comp-header-background: var(--theme-secondary);
  --comp-header-on-background: var(--theme-on-secondary);
  --comp-header-vision: var(--theme-on-secondary);
  --comp-header-search-background: transparent;
  --comp-header-search-mobile-background: color-mix(in srgb, var(--theme-secondary), transparent 50%);
  --comp-header-search-on-mobile-background: var(--theme-on-secondary);
  --comp-header-search-on-background: var(--theme-on-secondary);
  --comp-header-search-background-focused: color-mix(in srgb, var(--comp-header-search-on-background), var(--comp-header-search-background) 80%);
  --comp-header-search-mobile-background-focused: color-mix(in srgb, var(--comp-header-search-on-background), var(--comp-header-search-mobile-background) 80%);
  --comp-header-search-on-background-focused: var(--theme-on-secondary);
  --comp-header-search-radius: 0px;
  --comp-header-search-radius-focused: 4px;
  --comp-header-search-underline-color-focused: var(--theme-secondary);
  --comp-header-search-underline-color: var(--theme-primary);
  --comp-header-search-suggestion-background: var(--theme-surface-container-highest);
  --comp-header-search-suggestion-on-background: var(--theme-on-surface);
  --comp-header-search-suggestion-highlighted: var(--theme-surface-container);
  --comp-header-search-suggestion-radius: 8px;
  --comp-header-menu-bar-background: color-mix(in srgb, var(--comp-header-menu-surface), transparent calc((1 - var(--comp-header-menu-opacity)) * 100%));
  --comp-header-menu-bar-on-background: var(--theme-primary);
  --comp-header-menu-surface: var(--theme-surface);
  --comp-header-menu-on-surface: var(--theme-on-surface);
  --comp-header-menu-opacity: 0.9;
  --comp-header-menu-backdropfilter: none;
  --comp-header-menu-border: var(--theme-primary);
  --comp-header-category-header: var(--theme-on-background-header);
  --comp-header-category-text: var(--theme-on-background);
  --comp-header-category-arrow-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20d%3D%22M0%200%20L10%200%20L5%208%20Z%22%20fill%3D%22%23000%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  --comp-header-bubble-background: var(--theme-primary);
  --comp-header-bubble-on-background: var(--theme-on-primary);
  --comp-header-bubble-radius: 9999px;
  --comp-header-timecard-border: var(--theme-primary);
  --comp-header-notification-background: var(--theme-error-container);
  --comp-header-notification-on-background: var(--theme-on-error-container);
  --comp-header-notification-radius: 12px;
  --comp-header-badge-background: var(--theme-error);
  --comp-header-badge-on-background: var(--theme-on-error);
  --comp-header-mobile-open: var(--theme-on-secondary);
  --comp-header-mobile-title: var(--theme-on-secondary);
  --comp-header-logo-bookmark: var(--theme-primary-fixed);
  --comp-header-logo-color: #000080;
  --comp-header-logo-white: #ffffff;
  --comp-header-hamburger: var(--theme-on-secondary);
  --comp-header-mobile-logo-white: var(--comp-header-logo-white);
  --comp-header-mobile-logo-color: var(--comp-header-logo-color);

  --comp-footer-background: var(--theme-surface-container-highest);
  --comp-footer-on-background: var(--theme-on-surface);
  --comp-footer-logo-color: var(--theme-background);
  --comp-footer-border: var(--theme-primary);

  --comp-button-background: var(--theme-primary);
  --comp-button-on-background: var(--theme-on-primary);
  --comp-button-radius: 8px;
  --comp-button-padding: 6px 14px;
  --comp-button-opacity-hover: 0.7;

  --comp-select-background: var(--theme-surface-container-high);
  --comp-select-padding: 6px 8px 2px 8px;
  --comp-select-on-background: var(--theme-on-surface);
  --comp-select-radius: 4px;
  --comp-select-opacity-hover: 0.8;
  --comp-select-border: 2px solid var(--theme-primary);

  --comp-input-text-background: var(--theme-surface-container-high);
  --comp-input-text-padding: 6px 8px 2px 8px;
  --comp-input-text-on-background: var(--theme-on-surface);
  --comp-input-text-radius: 4px;
  --comp-input-text-opacity-hover: 0.8;
  --comp-input-text-placeholder-opacity: 0.6;
  --comp-input-text-border: 2px solid var(--theme-primary);

  --comp-link-color: var(--theme-primary);
  --comp-link-hover: var(--theme-secondary);
  --comp-link-visited: var(--theme-primary);
  --comp-link-decoration: underline;

  --comp-monogram-blue: var(--theme-primary-fixed);
  --comp-monogram-yellow: var(--theme-secondary-fixed);
  --comp-monogram-white: #ffffff;

  --comp-background-opacity: 0.3;
}