.fu-button {
  /* primary */
  --fu-btn-primary-fg: oklch(from var(--fu-accent) l c h);
  --fu-btn-primary-border: oklch(from var(--fu-accent) calc(l - 0.1) c h);
  --fu-btn-primary-bg: oklch(from var(--fu-surface-muted) l c h);

  /* success */
  --fu-btn-success-fg: oklch(from var(--fu-success) l c h);
  --fu-btn-success-border: oklch(from var(--fu-success) calc(l - 0.1) c h);
  --fu-btn-success-bg: oklch(from var(--fu-surface-muted) l c h);

  /* warning */
  --fu-btn-warning-fg: oklch(from var(--fu-warning) l c h);
  --fu-btn-warning-border: oklch(from var(--fu-warning) calc(l - 0.1) c h);
  --fu-btn-warning-bg: oklch(from var(--fu-surface-muted) l c h);

  /* danger */
  --fu-btn-danger-fg: oklch(from var(--fu-danger) l c h);
  --fu-btn-danger-border: oklch(from var(--fu-danger) calc(l - 0.1) c h);
  --fu-btn-danger-bg: oklch(from var(--fu-surface-muted) l c h);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  cursor: pointer;
  padding: 0 0.75rem;
  height: 2rem;

  background: var(--fu-surface-muted);
  border-radius: var(--fu-border-radius);
  border: 1px solid var(--fu-border);
  color: var(--fu-accent);

  transition:
    background-color 0.15s,
    border-color 0.15s;

  &:hover {
    background-color: var(--fu-surface-subtle);
  }

  &:focus-visible {
    outline: 1px solid var(--fu-accent);
    outline-offset: -1px;
    box-shadow: 0 0 0 2px color-mix(in oklch, var(--fu-accent) 40%, transparent);
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

/* Primary */
.fu-button--primary {
  color: var(--fu-btn-primary-fg);
  border-color: var(--fu-btn-primary-border);
  background-color: var(--fu-btn-primary-bg);

  &:hover {
    background-color: oklch(from var(--fu-btn-primary-bg) calc(l - 0.04) c h);
  }
}

/* Success */
.fu-button--success {
  color: var(--fu-btn-success-fg);
  border-color: var(--fu-btn-success-border);
  background-color: var(--fu-btn-success-bg);

  &:hover {
    background-color: oklch(from var(--fu-btn-success-bg) calc(l - 0.04) c h);
  }
}

/* Warning */
.fu-button--warning {
  color: var(--fu-btn-warning-fg);
  border-color: var(--fu-btn-warning-border);
  background-color: var(--fu-btn-warning-bg);

  &:hover {
    background-color: oklch(from var(--fu-btn-warning-bg) calc(l - 0.04) c h);
  }
}

/* Danger */
.fu-button--danger {
  color: var(--fu-btn-danger-fg);
  border-color: var(--fu-btn-danger-border);
  background-color: var(--fu-btn-danger-bg);

  &:hover {
    background-color: oklch(from var(--fu-btn-danger-bg) calc(l - 0.04) c h);
  }
}

.fu-button--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.dark {
  --fu-surface: oklch(0.18 0.02 255);
  --fu-text: oklch(0.92 0.02 255);
  --fu-border: oklch(0.32 0.02 255);
  --fu-surface-muted: oklch(0.22 0.03 255);
  --fu-surface-subtle: oklch(0.18 0.02 255);
  --fu-accent: oklch(0.63 0.17 330);

  /* semantic stays semantic */
  --fu-success: oklch(0.72 0.12 145);
  --fu-warning: oklch(0.8 0.14 75);
  --fu-danger: oklch(0.65 0.18 30);
}