/* theme-colors:start */
:root {
  --primitive-color-navy: #263372;
  --primitive-color-navy-deep: #1b2555;
  --primitive-color-purple: #6535a6;
  --primitive-color-purple-deep: #482477;
  --primitive-color-blue: #263372;
  --primitive-color-blue-dark: #1b2555;
  --primitive-color-gold: #63c4b3;
  --primitive-color-highlight: #fcdca2;
  --primitive-color-search: #fcdda0;
  --primitive-color-green-ink: #267f70;
  --primitive-color-orange: #f3743e;
  --primitive-color-article-tags: #ff532f;
  --primitive-color-coral: #df5143;
  --primitive-color-sky: #e9f7f3;
  --primitive-color-contact: #dff2ed;
  --primitive-color-solutions-blue: #edf5fc;
  --primitive-color-solutions-cream: #faf3ec;
  --primitive-color-solutions-lilac: #f0edff;
  --primitive-color-paper: #ffffff;
  --primitive-color-surface: #f6f8fb;
  --primitive-color-black: #000;
  --primitive-color-blog-green: #268477;
  --primitive-color-blog-ink: #111111;
  --primitive-color-ink: #101b2d;
  --primitive-color-muted: #516076;
  --primitive-color-border: #d8e0eb;
  --primitive-color-shadow: rgba(6, 19, 38, .18);
  --primitive-color-header: rgba(255, 255, 255, .94);
}
/* theme-colors:end */
:root {
  --template-font-color: var(--primitive-color-ink);
  --template-font-color-secondary: var(--primitive-color-muted);
  --template-icon-color: var(--template-color-0);
  --template-bg-color: var(--primitive-color-paper);
  --template-bg-color-secondary: var(--primitive-color-surface);
  --template-color-0: var(--primitive-color-blue);
  --template-color-1: var(--primitive-color-navy);
  --color-text-primary: var(--template-font-color);
  --color-text-secondary: var(--template-font-color-secondary);
  --color-on-primary: var(--primitive-color-paper);
  --color-on-secondary: var(--primitive-color-paper);
  --color-shadow: color-mix(in srgb, var(--template-color-1), transparent 82%);
  --color-rating: var(--primitive-color-gold);
  --color-social-proof-border: color-mix(in srgb, var(--primitive-color-surface), var(--primitive-color-ink) 14%);
  --site-header-background: var(--primitive-color-header);
  --site-header-color: var(--template-font-color);
  --navigation-active-color: var(--template-color-1);
  --site-navigation-mobile-background: var(--template-color-1);
  --site-navigation-mobile-color: var(--color-on-secondary);
  --component-hero-background: var(--primitive-color-surface);
  --component-hero-foreground: var(--template-font-color);
  --component-hero-muted: var(--template-font-color-secondary);
  --component-hero-accent: var(--template-color-0);
  --component-contact-form-background: var(--template-color-1);
  --component-contact-form-foreground: var(--color-on-secondary);
  --component-contact-form-muted: color-mix(in srgb, var(--color-on-secondary), transparent 18%);
  --component-contact-form-border: var(--template-color-0);
  --component-contact-form-control-background: var(--primitive-color-paper);
  --component-contact-form-control-border: var(--primitive-color-border);
  --component-contact-form-control-text: var(--template-font-color);
  --primary-button-bg: var(--template-color-0);
  --primary-button-bg-hover: var(--primitive-color-blue-dark);
  --primary-button-border: 1px solid var(--template-color-0);
  --primary-button-shadow: 0 .75rem 1.75rem var(--primitive-color-shadow);
  --primary-button-color: var(--color-on-primary);
  --primary-button-color-hover: var(--color-on-primary);
  --secondary-button-bg: transparent;
  --secondary-button-bg-hover: var(--primitive-color-navy-deep);
  --secondary-button-border: 1px solid var(--primitive-color-navy);
  --secondary-button-shadow: none;
  --secondary-button-color: var(--primitive-color-navy);
  --secondary-button-color-hover: var(--color-on-secondary);
  --footer-background: var(--primitive-color-orange);
  --footer-social-link-color: var(--primitive-color-paper);
  --footer-social-background: var(--primitive-color-navy);
  --footer-social-border-color: var(--primitive-color-navy);
  --footer-social-hover-border-color: var(--primitive-color-navy-deep);
  --footer-social-hover-ring-color: var(--primitive-color-paper);
  --footer-social-hover-background: var(--primitive-color-navy-deep);
  --footer-social-hover-color: var(--primitive-color-paper);
  --footer-color: var(--primitive-color-paper);
  --footer-muted-color: var(--primitive-color-paper);
  --footer-contact-color: var(--primitive-color-paper);
  --footer-border-color: color-mix(in srgb, var(--color-on-secondary), transparent 72%);
  --footer-link-hover-color: var(--primitive-color-paper);
  --section-media-border: 1px solid var(--primitive-color-border);
  --section-media-shadow: 0 1.5rem 4rem var(--color-shadow);
}


.theme-haergi {
  --section-article-heading-color: var(--primitive-color-gold);
  --section-article-social-color: var(--primitive-color-gold);
  --section-article-tag-color: var(--primitive-color-article-tags);
  --section-article-link-color: var(--primitive-color-article-tags);
  --section-article-text-color: var(--primitive-color-black);
  --button-primary-bg: var(--primitive-color-navy);
  --button-primary-bg-hover: var(--primitive-color-navy-deep);
  --button-primary-color: var(--primitive-color-paper);
  --button-primary-color-hover: var(--primitive-color-paper);
  --button-secondary-bg: transparent;
  --button-secondary-border: 1px solid var(--primitive-color-navy);
  --button-secondary-bg-hover: var(--primitive-color-navy-deep);
  --button-secondary-color: var(--primitive-color-navy);
  --button-secondary-color-hover: var(--primitive-color-paper);
  --section-title-size: clamp(2rem, 3.3vw, 3rem);
  --section-title-weight: 600;
  --section-card-title-size: 1.2rem;
  --section-card-description-size: 1rem;
  --section-eyebrow-color: var(--primitive-color-green-ink);
  --section-card-hover-background: var(--template-bg-color-secondary);
  --section-card-hover-border: var(--template-color-0);
  --section-card-hover-shadow: none;
  --section-card-shadow: none;
  --section-card-border: transparent;
}

.theme-haergi {
  --navigation-submenu-background: color-mix(in srgb, var(--primitive-color-green-ink) 25%, var(--primitive-color-paper));
  --button-orange-bg-hover: color-mix(in srgb, var(--primitive-color-orange), var(--primitive-color-paper) 15%);
  --section-hero-overlay-color: color-mix(in srgb, var(--primitive-color-ink), transparent 20%);
  --section-hero-editorial-overlay: linear-gradient(90deg, var(--primitive-color-surface) 0%, color-mix(in srgb, var(--primitive-color-surface), transparent 8%) 28%, color-mix(in srgb, var(--primitive-color-surface), transparent 70%) 53%, transparent 68%);
  --section-accent-color: var(--primitive-color-orange);
  --section-highlight-background: var(--primitive-color-contact);
  --section-search-background: var(--primitive-color-search);
  --section-link-color: var(--primitive-color-green-ink);
  --section-blog-title-color: var(--primitive-color-blog-green);
  --section-blog-description-color: var(--primitive-color-blog-ink);
  --section-note-background: var(--primitive-color-highlight);
  --section-step-alternate-background: var(--primitive-color-gold);
}