:root {
  color-scheme: light;
  --bk-template-primary-color: #78bfd7;
  --bk-template-primary-rgb: 120, 191, 215;
  --bk-template-secondary-color: #e8af11;
  --bk-template-secondary-rgb: 232, 175, 17;
  --bk-template-tertiary-color: #e9f8fc;
  --bk-template-tertiary-rgb: 233, 248, 252;
  --bk-template-hero-bg: #f8fcfe;
  --bk-template-hero-gradient-angle: 135deg;
  --bk-template-hero-gradient-start-color: #e8af11;
  --bk-template-hero-gradient-start-mix: 82%;
  --bk-template-hero-gradient-end-color: #78bfd7;
  --bk-template-hero-gradient-end-mix: 60%;
  --bk-template-hero-gradient-accent-one-color: #e8af11;
  --bk-template-hero-gradient-accent-one-mix: 56%;
  --bk-template-hero-gradient-accent-two-color: #e9f8fc;
  --bk-template-hero-gradient-accent-two-mix: 66%;
  --bk-template-primary-bg: #ffffff;
  --bk-template-secondary-bg: #edf8fb;
  --bk-template-cta-bg: #78bfd7;
  --bk-template-footer-bg: #173041;
  --flow-primary: var(--bk-template-primary-color);
  --flow-secondary: var(--bk-template-secondary-color);
  --flow-tertiary: var(--bk-template-tertiary-color);
  --flow-hero-bg: var(--bk-template-hero-bg);
  --flow-primary-bg: var(--bk-template-primary-bg);
  --flow-secondary-bg: var(--bk-template-secondary-bg);
  --flow-cta-bg: var(--bk-template-cta-bg);
  --flow-footer-bg: var(--bk-template-footer-bg);
  --flow-primary-rgb: var(--bk-template-primary-rgb);
  --flow-secondary-rgb: var(--bk-template-secondary-rgb);
  --flow-tertiary-rgb: var(--bk-template-tertiary-rgb);
  --bk-ink: color-mix(in srgb, var(--flow-footer-bg) 86%, var(--flow-primary));
  --bk-muted: color-mix(in srgb, var(--flow-footer-bg) 58%, var(--flow-primary-bg));
  --bk-line: color-mix(in srgb, var(--flow-primary) 28%, transparent);
  --bk-surface: var(--flow-primary-bg);
  --bk-surface-2: var(--flow-secondary-bg);
  --bk-panel-strong: color-mix(in srgb, var(--flow-primary-bg) 94%, transparent);
  --flow-ink: var(--bk-ink);
  --flow-muted: var(--bk-muted);
  --flow-line: var(--bk-line);
  --flow-surface: var(--bk-surface);
  --flow-surface-2: var(--bk-surface-2);
  --flow-panel: var(--bk-panel-strong);
  --flow-on-accent: var(--flow-primary-bg);
  --flow-nav-inverse: var(--flow-primary-bg);
  --flow-nav-solid: var(--flow-panel);
  --primary-color: var(--flow-primary);
  --secondary-color: var(--flow-secondary);
  --tertiary-color: var(--flow-tertiary);
  --hero-bg: var(--flow-hero-bg);
  --primary-bg: var(--flow-primary-bg);
  --secondary-bg: var(--flow-secondary-bg);
  --cta-bg: var(--flow-cta-bg);
  --footer-bg: var(--flow-footer-bg);
  --flow-radius: 28px;
  --flow-radius-small: 18px;
  --flow-shadow: 0 28px 90px color-mix(in srgb, var(--flow-ink) 14%, transparent);
  --flow-soft-shadow: 0 18px 58px color-mix(in srgb, var(--flow-primary) 16%, transparent);
  --flow-gradient: linear-gradient(135deg, color-mix(in srgb, var(--flow-primary) 16%, transparent), color-mix(in srgb, var(--flow-secondary) 12%, transparent), color-mix(in srgb, var(--flow-tertiary) 36%, transparent));
  --flow-hero-gradient: radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--bk-template-hero-gradient-accent-two-color) var(--bk-template-hero-gradient-accent-two-mix), transparent), transparent 34%), radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--bk-template-hero-gradient-start-color) 22%, transparent), transparent 30%), var(--flow-hero-bg);
}

[data-theme="dark"] {
  color-scheme: dark;
  /* Dark mode is a complete surface palette, not only a text-color swap. */
  --bk-template-hero-bg: #0b1822;
  --bk-template-primary-bg: #0d1b25;
  --bk-template-secondary-bg: #122631;
  --bk-template-cta-bg: #183b49;
  --bk-template-footer-bg: #08131b;
  --bk-template-hero-gradient-start-mix: 16%;
  --bk-template-hero-gradient-end-mix: 14%;
  --bk-template-hero-gradient-accent-one-mix: 12%;
  --bk-template-hero-gradient-accent-two-mix: 10%;
  --bk-ink: #edf7fa;
  --bk-muted: #a9bec8;
  --bk-line: color-mix(in srgb, var(--flow-primary) 28%, #39515e);
  --bk-surface: #10222d;
  --bk-surface-2: #152b36;
  --bk-panel-strong: rgba(17, 37, 48, 0.94);
  --flow-on-accent: #07131a;
  --flow-nav-inverse: #f4fbfd;
  --flow-nav-solid: #112631;
  --flow-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  --flow-soft-shadow: 0 18px 58px color-mix(in srgb, var(--flow-primary) 14%, transparent);
  --flow-gradient: linear-gradient(135deg, color-mix(in srgb, var(--flow-primary) 14%, transparent), color-mix(in srgb, var(--flow-secondary) 8%, transparent), transparent);
  --flow-hero-gradient: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--flow-primary) 12%, transparent), transparent 36%), radial-gradient(circle at 88% 14%, color-mix(in srgb, var(--flow-secondary) 9%, transparent), transparent 34%), var(--flow-hero-bg);
}