@property --primary-50 { syntax: "<color>"; inherits: true; initial-value: #f6f7fa; }
@property --primary-100 { syntax: "<color>"; inherits: true; initial-value: #f4f5ff; }
@property --primary-200 { syntax: "<color>"; inherits: true; initial-value: #dddee5; }
@property --primary-400 { syntax: "<color>"; inherits: true; initial-value: #aeb1c5; }
@property --primary-600 { syntax: "<color>"; inherits: true; initial-value: #3e55ff; }
@property --primary-900 { syntax: "<color>"; inherits: true; initial-value: #252d6e; }

.hero-flow,
.cpd-demo,
.input-field,
.brand-switcher__swatch {
  --neutral-100: #fffffe;
  --neutral-200: #fafafa;
  --neutral-250: #787c82;
  --neutral-300: #58585f;
  --neutral-400: #141a23;

  --additional-blue: #0093ee;
  --additional-green-500: #0ea213;
  --additional-orange: #f68700;
  --additional-red-200: #ff5a5a;
  --additional-red-500: #ee0000;
  --additional-mint: #00cccc;
  --additional-magenta: #b800f0;
  --additional-red-300: #eb4646;
  --additional-red-400: #d73232;
  --status-pending: #eab400;

  --hf-font: "Akkurat", "Inter", system-ui, sans-serif;
  --hf-font-size-caption: 10px;
  --hf-font-size-small: 11px;
  --hf-font-size-body: 12px;
  --hf-font-size-medium: 14px;
  --hf-font-size-large: 16px;

  --hf-duration-panel: 320ms;
  --hf-duration-switch: 450ms;
  --hf-ease-panel: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-flow,
.hero-flow [data-brand="centology"],
.hero-flow[data-brand="centology"],
.cpd-demo,
.input-field,
.brand-switcher__swatch {
  --primary-50: #f6f7fa;
  --primary-100: #f4f5ff;
  --primary-200: #dddee5;
  --primary-300: #d8ddff;
  --primary-400: #aeb1c5;
  --primary-500: #6e75aa;
  --primary-600: #3e55ff;
  --primary-700: #2a41eb;
  --primary-800: #162dd7;
  --primary-900: #252d6e;

  --secondary-200: #ffd33e;
  --secondary-300: #eac137;
  --secondary-400: #eab400;
  --secondary-600: #3b2e00;
}

.hero-flow[data-brand="lca"],
.hero-flow [data-brand="lca"],
.brand-switcher:has(.toggle--brand input[value="lca"]:checked) :is(.input-field, .brand-switcher__swatch) {
  --primary-50: #f6f9fa;
  --primary-100: #f0f8fb;
  --primary-200: #d6e0e6;
  --primary-300: #e6f2f7;
  --primary-400: #aebec5;
  --primary-500: #54717e;
  --primary-600: #008ac4;
  --primary-700: #1384b5;
  --primary-800: #1e7da6;
  --primary-900: #134a61;

  --secondary-200: #ffd33e;
  --secondary-300: #eac137;
  --secondary-400: #eab400;
  --secondary-600: #3b2e00;
}

.hero-flow[data-brand="ebc"],
.hero-flow [data-brand="ebc"],
.brand-switcher:has(.toggle--brand input[value="ebc"]:checked) :is(.input-field, .brand-switcher__swatch) {
  --primary-50: #f5f8fa;
  --primary-100: #f0f6fa;
  --primary-200: #d8dfe4;
  --primary-300: #dcedf7;
  --primary-400: #909ca3;
  --primary-500: #667680;
  --primary-600: #348abf;
  --primary-700: #357eab;
  --primary-800: #2c6a8f;
  --primary-900: #122836;

  --secondary-200: #ffd2ad;
  --secondary-300: #d99b68;
  --secondary-400: #643b1a;
  --secondary-600: #3a220f;
}

.hero-flow[data-brand="dma"],
.hero-flow [data-brand="dma"],
.brand-switcher:has(.toggle--brand input[value="dma"]:checked) :is(.input-field, .brand-switcher__swatch) {
  --primary-50: #f5f7fa;
  --primary-100: #e6eef7;
  --primary-200: #d9dfe5;
  --primary-300: #c3d7ee;
  --primary-400: #abb4bd;
  --primary-500: #6b829c;
  --primary-600: #2f527a;
  --primary-700: #334961;
  --primary-800: #2b353f;
  --primary-900: #1e252d;

  --secondary-200: #ffc0ad;
  --secondary-300: #e53a04;
  --secondary-400: #a23615;
  --secondary-600: #61210e;
}