:root{
  --color-black:#000000;
  --color-white:#ffffff;

  /* Brand core (from the marketing homepage source) */
  --brand-blue:#1d3686;
  --brand-blue-dark:#152a68;
  --brand-yellow:#ffd700;
  --brand-red:#ff4d4d;
  --brand-red-hover:#ff3333;
  --brand-cyan:#00d2d3;
  --brand-purple:#c56cf0;
  --brand-green:#7ed957;
  --bg-dark:#25455e;

  /* Each product owns one accent color, used as its badge/highlight everywhere */
  --product-fish-wishlist:var(--brand-cyan);
  --product-stork-credit:var(--brand-green);
  --product-omnibus-owl:var(--brand-purple);
  --product-product-pelican:var(--brand-yellow);

  /* Marketing surface semantics */
  --surface-marketing:var(--brand-blue);
  --surface-marketing-card:rgba(0,0,0,.4);
  --surface-marketing-card-border:rgba(255,255,255,.1);
  --surface-ticker:var(--brand-yellow);
  --surface-mission:var(--color-white);
  --text-on-brand:var(--color-white);
  --text-on-light:#111111;
  --text-on-light-muted:#333333;

  /* Docs / support site chrome (third-party Mantle template, Native-branded) */
  --docs-bg:#ffffff;
  --docs-bg-elevated:#f7f7f7;
  --docs-border:#e5e5e5;
  --docs-text:#1a1a1a;
  --docs-text-muted:#6b6b6b;
  --docs-link:#1d3686;
  --docs-link-hover:#152a68;
  --docs-btn-bg:#1a1a1a;
  --docs-btn-bg-hover:#191919;
  --docs-btn-bg-active:#171717;
  --docs-btn-fg:#ffffff;
}

:root[data-theme="dark"]{
  --docs-bg:#171717;
  --docs-bg-elevated:#0f0f0f;
  --docs-border:#2b2b2b;
  --docs-text:#f2f2f2;
  --docs-text-muted:#a6a6a6;
  --docs-link:#ffffff;
  --docs-link-hover:#d9d9d9;
  --docs-btn-bg:#ffffff;
  --docs-btn-bg-hover:#f0f0f0;
  --docs-btn-bg-active:#e5e5e5;
  --docs-btn-fg:#000000;
}