/* One palette source for the app, branding preview and hosted payment pages.
   Until installation settings arrive, use a neutral accent instead of another brand. */
:root, .branding-palette-scope {
  --palette-dark: #b9c4ce;
  --palette-light: #455563;
  --palette-light-accent: #394956;
  --palette-light-ink: #ffffff;
}
:root[data-palette="lime"], .branding-palette-scope[data-palette="lime"] {
  --palette-dark: #c3f53c; --palette-light: #aed42f; --palette-light-accent: #5a7d0a; --palette-light-ink: #15191b;
}
:root[data-palette="blue"], .branding-palette-scope[data-palette="blue"] {
  --palette-dark: #8dc3ff; --palette-light: #2563b8; --palette-light-accent: #1756a4;
}
:root[data-palette="violet"], .branding-palette-scope[data-palette="violet"] {
  --palette-dark: #c6adff; --palette-light: #7446b4; --palette-light-accent: #6836a8;
}
:root[data-palette="teal"], .branding-palette-scope[data-palette="teal"] {
  --palette-dark: #71dfcc; --palette-light: #087c69; --palette-light-accent: #076b5b;
}
:root[data-palette="orange"], .branding-palette-scope[data-palette="orange"] {
  --palette-dark: #ffb36b; --palette-light: #b94f0a; --palette-light-accent: #9a4008;
}
:root[data-palette="rose"], .branding-palette-scope[data-palette="rose"] {
  --palette-dark: #f4a0c1; --palette-light: #b52b64; --palette-light-accent: #a12557;
}
:root[data-palette="amber"], .branding-palette-scope[data-palette="amber"] {
  --palette-dark: #f2ce73; --palette-light: #936600; --palette-light-accent: #7b5500;
}
:root[data-palette="emerald"], .branding-palette-scope[data-palette="emerald"] {
  --palette-dark: #6fdaae; --palette-light: #117452; --palette-light-accent: #0e6245;
}
:root, .branding-palette-scope, .branding-dark {
  --brand: var(--palette-dark);
  --brand-ink: #0a0c0d;
  --accent: var(--palette-dark);
  --accent-2: var(--brand);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-subtle: color-mix(in srgb, var(--accent) 8%, transparent);
  --brand-soft: color-mix(in srgb, var(--brand) 13%, transparent);
  --brand-glow: color-mix(in srgb, var(--brand) 35%, transparent);
  --brand-glow-faint: color-mix(in srgb, var(--brand) 5%, transparent);
  --brand-glow-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-glow-strong: color-mix(in srgb, var(--brand) 18%, transparent);
  --focus-ring: 2px solid var(--accent);
  --focus-shadow: 0 0 0 3px var(--accent-soft);
}
:root.light, :root.light .branding-palette-scope, :root[data-branding-theme="light"] {
  --brand: var(--palette-light);
  --brand-ink: var(--palette-light-ink);
  --accent: var(--palette-light-accent);
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
}