@theme {
  --filled-fg: var(--color-white);
  --filled-fg-hover: var(--color-white);
  --filled-fg-active: var(--color-white);
  --filled-bg: var(--brand-bg);
  --filled-bg-hover: var(--brand-bg-high-hover);
  --filled-bg-active: var(--brand-bg-high-active);
  --filled-border-color: var(--color-transparent);

  --outline-fg: var(--base-fg);
  --outline-fg-hover: var(--brand-bg);
  --outline-fg-active: var(--brand-bg);
  --outline-bg: var(--color-transparent);
  --outline-bg-hover: var(--brand-bg-low-hover);
  --outline-bg-active: var(--brand-bg-low-active);
  --outline-border-color: var(--brand-bg);

  --subtle-fg: var(--base-fg);
  --subtle-fg-hover: var(--brand-bg);
  --subtle-fg-active: var(--brand-bg);
  --subtle-bg: var(--color-transparent);
  --subtle-bg-hover: var(--brand-bg-low-hover);
  --subtle-bg-active: var(--brand-bg-low-active);
  --subtle-border-color: var(--color-transparent);
}